创建反应应用程序（不弹出）+波旁威士忌/整洁？

Posted 2023-02-22

【中文标题】创建反应应用程序（不弹出）+波旁威士忌/整洁？

【英文标题】：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-neat。 node-neat是一个端口，往往落后于官方版本。 npmjs.com/package/bourbon-neat

非常感谢。非常感谢任何帮助。

最好的办法是在github.com/thoughtbot/… 上查看整洁的 NPM 文档作为替代方案，您可能想尝试eyeglass.rocks 作为处理 sass 和依赖项的一种方式。可悲的是，反应完全不在我的驾驶室范围内，所以这是我能给出的最好建议。

嘿，您最终找到解决方案了吗？

【参考方案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 样式树。