【问题标题】:create-react-app (without ejecting) + bourbon/neat?创建反应应用程序(不弹出)+波旁威士忌/整洁?
【发布时间】:2017-09-16 19:54:38
【问题描述】:

我正在重写一个使用 Bourbon 的“旧”React 原型,它还在 gulpfile 中使用 gulp-sass 来注入节点整洁的依赖项:

var sassOptions = {
    includePaths: require('node-neat').includePaths,
};

我想使用 create-react-app 样板文件,并通过使用 npm 脚本编译 sass 文件(也因为 create-react-app 限制你),为样式创建一个“简单”的工作流程,但我可以不知道该怎么做。

"build-css": "node-sass src/styles/ -o src/",
"watch-css": "npm run build-css && node-sass src/styles/ -o src/ --watch --recursive"

我将来可能会使用不同的方法重写样式(可能使用样式化组件,可能继续使用 Sass 并完全放弃 Bourbon),但我现在只需要从旧项目中移植 Sass 样式。

关于集成 create-react-app(不弹出)和 Bourbon/Neat 有什么想法吗?

例如,有没有办法将整洁的.includePaths 位放入 package.json 中的 node-sass 单行脚本中?

【问题讨论】:

  • 次要说明,但您可能应该将node-neat 换成bourbon-neatnode-neat是一个端口,往往落后于官方版本。 npmjs.com/package/bourbon-neat
  • 非常感谢。非常感谢任何帮助。
  • 最好的办法是在github.com/thoughtbot/… 上查看整洁的 NPM 文档作为替代方案,您可能想尝试eyeglass.rocks 作为处理 sass 和依赖项的一种方式。可悲的是,反应完全不在我的驾驶室范围内,所以这是我能给出的最好建议。
  • 嘿,您最终找到解决方案了吗?

标签: bourbon neat node-sass create-react-app npm-scripts


【解决方案1】:

据我所知,您无法评估 includePaths 您需要能够通过 package.json 中的单线导入 Bourbon 和 Neat。

但是,您仍然可以将 Bourbon +Neat 与未弹出的 React 应用程序一起使用。如果您按照 React here 的描述保留您的 package.json 更改,请在您的机器上安装 gems 并将它们本地安装在您认为合适的 Sass 目录中。举个例子;

  • /src
    • /样式
      • /供应商
        • /波旁威士忌
        • /整洁
        • /other-sass-library
      • /基地
      • /布局
      • /...
    • App.js
    • ...

安装 gem 后,您可以在希望安装它们的位置运行命令。 bourbon install --path <some-path>neat install

当您可以通过这种方式引用 Bourbon 和 Neat 时,只需 @import vendors/bourbon/bourbon 等即可。

当然,这种管理样式的方式与 React/Webpack 的协同定位、模块思维不同,但有时肯定需要完全受控的 Sass 样式树。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-04-03
    • 2019-06-04
    • 1970-01-01
    相关资源
    最近更新 更多