7

我正在重写一个使用 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 单线脚本中?

4

1 回答 1

0

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

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

  • /src
    • /样式
      • /供应商
        • /波旁酒
        • /整洁的
        • /其他 sass 库
      • /根据
      • /布局
      • /...
    • 应用程序.js
    • ...

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

当您可以通过这种方式引用 Bourbon 和 Neat 时,简单的@import vendors/bourbon/bourbonetc是没有问题的。

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

于 2018-02-06T13:48:26.843 回答