开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第36天，点击查看活动详情

---

写在前面

本篇是react学习的第四篇，介绍如何在react项目中添加Sass样式表

添加Sass样式表

官方建议

官方文档建议不要在不同组件之间重用相同的CSS类。例如，建议不要在<AcceptButton>和<RejectButton>组件中使用.Button 样式，而是创建一个具有自己的.Button样式的<Button>组件，<AcceptButton>和<RejectButton>都可以用。这里先这么看着，到后面举个例子说明一下。

而遵循上述规则的话通常会使CSS预处理器不太有用，因为组件组合取代了混合和嵌套等特性。但是，如果觉得CSS预处理器很有价值，一定要用，也可以在项目中集成它。

但是因为我没用，所以我没什么例子举，大致步骤如下：

在react项目中添加Sass样式表

要使用Sass，首先安装Sass：npm install sass

现在，可以将src/App/App.css重命名为App.scss，并修改src/App/App.js中的代码，改为导入src/App/App.scss。如果在项目中使用.scss或.sass扩展名导入，则会自动编译此文件和任何其他文件。

要在Sass文件之间实现共享样式，可以使用Sass的@use规则。例如，src/App/App.scss文件中可以包括@use"./shared.scss";，这样shared.scss中的样式就共享给App.scss了。

sass_PATH环境变量

sass还支持 sass_PATH 环境变量

每次都使用相对路径去导入scss文件会产生很多../，我们可以通过添加一个 sass_PATH 环境变量，使相对路径的导入更简洁。

添加sass_PATH 环境变量方法如下：在项目根目录中添加一个.env文件，文件中添加 SASS_path 环境变量。如果要指定更多目录，可以将它们一起赋值给 SASS_PATH 中，并用;分隔（例如path1;path2;path3），代码如下：

SASS_PATH=path1;path2;path3

这样我们本来可能是这样导入一个样式的import '../../path1/index.scss，就可以写成import 'path1/index.scss

Node Sass

因为Node Sass已被弃用。如果一开始用的是Node Sass，可以通过将package.json文件中的Node Sass替换为Sass或运行以下命令来迁移到Dart Sass：

npm uninstall node-sass
npm install sass

写在最后

以上就是如何在react项目中添加Sass样式表所有代码和说明