create-react-app(不弹出)+波本威士忌/整洁?

时间:2017-04-20 09:12:53

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

我正在重写使用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的任何想法吗?

有没有办法将neat.includePaths位放入package.json中的node-sass单线程脚本中?例如?

1 个答案:

答案 0 :(得分:0)

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

但是,你仍然可以使用Bourbon + Neat和你的非弹出React应用程序。如果按照React here所述保留package.json更改,请在计算机上安装gem并将其本地安装在您认为合适的Sass目录中。作为一个例子;

  • / SRC
    • /样式
      • /供应商
        • /波旁
        • /整齐
        • /其他-SASS库
      • /碱
      • /布局
      • / ...
    • App.js
    • ...

安装gem时,运行要安装它们的命令。 bourbon install --path <some-path>neat install

当你以这种方式引用Bourbon和Neat时,简单@import vendors/bourbon/bourbon等没问题。

当然,这种管理样式的方式与React / Webpack的共存模块思维并不相同,但有时候肯定需要完全控制的Sass样式树。