添加 Sass 样式支持

注意：该功能仅支持 react-scripts@2.0.0 及以上版本。

通常，我们建议你不要在不同组件中重复使用相同的 CSS 类。例如，我们建议创建 <Button> 组件与其自己的 .Button 样式，而不是在 <AcceptButton> 和 <RejectButton> 中重复使用 .Button 类，这样 <AcceptButton> 和 <RejectButton> 都能正常渲染（但是不继承）。

遵循此规则会降低使用 CSS 预处理器的必要性，因为诸如 mixins 和 nesting 之类的功能均已被组件集成所取代。但是，如果你认为 CSS 预处理器有其必要性的话，可以对其进行集成。

要使用 Sass 的话，首先安装 sass:

$ npm install sass
# 或者
$ yarn add sass

现在，你可以将 src/App.css 重命名为 src/App.scss，并更新 src/App.js 以引入 src/App.scss。 如果以扩展名 .scss 或 .sass 引入，则此文件和其他文件都将会自动编译。

要在 Sass 文件间共享变量，可以使用 Sass @use 指令。例如，src/App.scss 和其他组件样式文件可以通过 @use "./shared.scss"; 引入定义的变量。

这允许你像这样进行引入操作：

@use 'styles/_colors.scss'; // assuming a styles directory under src/
@use '~nprogress/nprogress'; // loading a css file from the nprogress node module

注意：如上所示，要从 node_modules 目录下引入文件，需要在文件路径前加上 ~ 符号。

sass 也支持 SASS_PATH 变量。

To use imports relative to a path you specify, you can add a .env file at the project root with the path specified in the SASS_PATH environment variable. To specify more directories you can add them to SASS_PATH separated by a : like path1:path2:path3.

注意：对于 windows 操作系统，请使用分号分隔各个路径。

SASS_PATH=path1;path2;path3

提示：你也可以选择将此功能与 CSS 模块一起使用！

注意：如果你正在使用 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

Note: LibSass and the packages built on top of it, including Node Sass, are deprecated. If you're a user of Node Sass, you can migrate to Dart Sass by replacing node-sass in your package.json file with sass or by running the following commands:

$ npm uninstall node-sass
$ npm install sass
# or
$ yarn remove node-sass
$ yarn add sass