添加 Sass 样式表

注意：此功能适用于 [email protected] 及更高版本。

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

遵循此规则通常会降低 CSS 预处理器的实用性，因为诸如 mixin 和嵌套之类的功能将被组件组合所取代。但是，如果您发现它有价值，您可以集成 CSS 预处理器。

要使用 Sass，首先安装 sass

$ npm install sass
# or
$ 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 变量。

要使用相对于您指定的路径的导入，您可以在项目根目录添加一个 .env 文件，并在 SASS_PATH 环境变量中指定路径。要指定更多目录，您可以将它们添加到 SASS_PATH 中，并用 : 分隔，例如 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

注意：LibSass 和基于它的软件包（包括 Node Sass）已 弃用。如果您是 Node Sass 的用户，您可以通过将 package.json 文件中的 node-sass 替换为 sass 或运行以下命令来迁移到 Dart Sass

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