create-react-app 添加 Sass 样式表
添加 Sass 样式表
注意：此功能适用于
react-scripts@2.0.0及更高版本。
通常，我们建议你不要在不同的组件中重用相同的 CSS 类。
例如，我们建议不要在 <AcceptButton> 和 <RejectButton> 组件中使用同一个 .Button CSS 类，而是使用自己的 .Button 样式创建一个 <Button> 组件，<AcceptButton> 和
遵循这个规则通常会使 CSS 预处理器变得不那么有用，因为 mixins 和嵌套等功能会被组件组合所取代。 但是，如果你觉得 CSS 预处理程序有价值，你可以集成它。
要使用Sass，首先安装 node-sass ：
$ npm install node-sass --save
$ # or
$ yarn add node-sass
现在你可以将 src/App.css 重命名为 src/App.scss 并更新 src/App.js 以导入 src/App.scss 。
此文件和任何其他文件将会自动编译，如果使用扩展名 .scss 或 .sass 导入的话。
要在 Sass 文件之间共享变量，可以使用 Sass 导入。
例如，src/App.scss 和其他组件样式文件可能包含 @import "./shared.scss"; 中定义的变量。
允许你像这样导入
@import 'styles/_colors.scss'; // 假设 styles 目录 在 src/ 目录下
@import '~nprogress/nprogress'; // 从 nprogress node模块导入 一个 css 文件
注意： 你必须在
node_modules之前添加~前缀，如上所示。
node-sass 还支持 SASS_PATH 变量。
要使用你指定的相对路径导入，并且在不添加 ~ 前缀的情况下从 node_modules 使用导入，可以在项目根目录中使用变量 SASS_PATH=node_modules:src 添加 .env 文件。
要指定更多目录，可以将它们添加到 SASS_PATH ，用 : 分隔，例如 path1:path2:path3 。
如果你设置 SASS_PATH=node_modules:src ，这将允许像这样导入
@import 'styles/colors'; //假设 src/ 下的 styles 目录中存在 _colors.scss 文件。
@import 'nprogress/nprogress'; // // 从 nprogress node模块导入 一个 css 文件
提示： 你也可以选择将此功能与 CSS modules 配合使用！
注意： 如果你正在使用Flow，请覆盖
.flowconfig中的module.file_ext设置，以便它识别.sass或.scss文件。
你还需要包含 .js，.jsx，.mjs 和 .json文件的 module.file_ext 默认设置。
[options]
module.file_ext=.js
module.file_ext=.jsx
module.file_ext=.mjs
module.file_ext=.json
module.file_ext=.sass
module.file_ext=.scss
