如何有效地使用 node-sass 和 create-react-app 2？答案

【问题标题】：How exactly to use node-sass with create-react-app 2 efficiently?如何有效地使用 node-sass 和 create-react-app 2？
【发布时间】：2018-10-26 15:34:28
【问题描述】：

所以，我以前用create-react-app@v1写gulp任务来缩小和编译SASS，这不是实时的，但现在在create-react-app@v2，Facebook已经支持node-sass编译并实时反映变化。所以，我的问题是

使用 node-sass，我应该把我的 styles.scss 放在哪里？

我试过把它放在index.html，但它不起作用，所以也许 index.js 会解决这个问题？

一旦我npm run build，CRA2 会缩小我在styles.min.css 中的 SASS 吗？

【问题讨论】：

facebook.github.io/create-react-app/docs/…
@AlexanderStaroselsky 是的，我阅读了文档，但没有提到如何缩小您编译的 css，通常我使用 cssnano 进行缩小。
你真的试过了吗？按照文档导入 SCSS 文件并查看它是否在 npm run build 上编译和缩小？
@AlexanderStaroselsky 还没有，我给它做个dummy，但是后处理显示CSS没有缩小facebook.github.io/create-react-app/docs/post-processing-css
你应该试试。创建一个新的create-react-app，将App.css 更新为App.scss 并更新package.json 中的browserslist 编译、缩小和后处理CSS。试试"last 2 versions" 和"> 5%" for browserslist 类似display:flex，它将添加必要的浏览器前缀。关键是，下次再试一次，你的问题就会有一半得到回答。

标签： reactjs sass create-react-app

【解决方案1】：

将您的样式放入/src/App.scss，并更新src/App.js（顶级JS 文件/索引）以包含App.scss 而不是.css。这将导致 CRA 自动编译/后处理 SCSS。

另请参阅：https://facebook.github.io/create-react-app/docs/adding-a-sass-stylesheet

【讨论】：

那么，可以将我所有的_sass.scss 文件放在一个目录中，然后将@import 放在顶级_styles.scss 中吗？
是的，完全正确。创建/styles 目录（或sass，或css）并从顶级App.scss 导入文件是很常见的。根据facebook.github.io/create-react-app/docs/post-processing-css，它也应该自动缩小 css