添加 Sass 样式表

注意：react-scripts@2.0.0 及更高版本提供此功能。

¥Note: this feature is available with react-scripts@2.0.0 and higher.

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

¥Generally, we recommend that you don’t reuse the same CSS classes across different components. For example, instead of using a .Button CSS class in <AcceptButton> and <RejectButton> components, we recommend creating a <Button> component with its own .Button styles, that both <AcceptButton> and <RejectButton> can render (but not inherit).

遵循这条规则通常会使 CSS 预处理器变得不那么有用，因为混合和嵌套等功能被组件组合所取代。但是，如果你觉得它有价值，你可以集成一个 CSS 预处理器。

¥Following this rule often makes CSS preprocessors less useful, as features like mixins and nesting are replaced by component composition. You can, however, integrate a CSS preprocessor if you find it valuable.

要使用 Sass，首先安装 sass：

¥To use Sass, first install sass:

$ npm install sass
# or
$ yarn add sass

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

¥Now you can rename src/App.css to src/App.scss and update src/App.js to import src/App.scss. This file and any other file will be automatically compiled if imported with the extension .scss or .sass.

要在 Sass 文件之间共享变量，可以使用 Sass 的 @use 规则。例如，src/App.scss 和其他组件样式文件可以包括带有变量定义的 @use "./shared.scss";。

¥To share variables between Sass files, you can use Sass's @use rule. For example, src/App.scss and other component style files could include @use "./shared.scss"; with variable definitions.

这将允许你进行导入，例如

¥This will allow you to do imports like

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

注意：你可以使用 ~ 作为路径前缀，如上所示，以解析 node_modules 中的模块。

¥Note: You can prefix paths with ~, as displayed above, to resolve modules from node_modules.

sass 还支持 SASS_PATH 变量。

¥sass also supports the SASS_PATH variable.

要使用相对于你指定的路径的导入，你可以使用 SASS_PATH 环境变量中指定的路径在项目根目录添加 .env 文件。要指定更多目录，你可以将它们添加到 SASS_PATH，用 : 分隔，例如 path1:path2:path3。

¥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 操作系统，请用分号分隔路径。

¥Note: For the Windows operating system, separate your paths by semicolons.

SASS_PATH=path1;path2;path3

提示：你也可以选择在 CSS 模块 上使用此功能！

¥Tip: You can opt into using this feature with CSS modules too!

注意：如果你使用 Flow，请覆盖 .flowconfig 中的 module.file_ext 设置，以便它识别 .sass 或 .scss 文件。你还需要包括 .js、.jsx、.mjs 和 .json 文件的 module.file_ext 默认设置。

¥Note: If you're using Flow, override the module.file_ext setting in your .flowconfig so it'll recognize .sass or .scss files. You will also need to include the module.file_ext default settings for .js, .jsx, .mjs and .json files.

[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

注意：LibSass 以及构建在其之上的软件包（包括 Node Sass）是 已弃用。如果你是 Node Sass 的用户，则可以通过将 package.json 文件中的 node-sass 替换为 sass 或运行以下命令来迁移到 Dart Sass：

¥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