如何将 SCSS 样式添加到 React 项目？

Question

我刚刚开始学习 React（有一些 JavaScript 知识，因为我也在学习 tis）并构建我的第一个项目。我想知道如何使用 CSS/SCSS 为我的第一个 React 项目添加样式，因为我从我的 html、CSS/SCSS 学习项目中获得了一些知识和理解。

你如何将 SCSS 添加到你的 React 项目中？

原文由 Will 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 scss 的方式取决于您的 React 开发环境。对于初学者，React 建议使用 Create React App，据他们说，这是“学习 React 的舒适环境，是开始在 React 中构建新的单页应用程序的最佳方式”。您可以在 https://reactjs.org/docs/create-a-new-react-app.html 阅读更多相关信息。要创建您的应用程序，您只需在命令行中键入以下内容：

 npx create-react-app my-app

之后，React 设置了一个完整的开发环境，其中包含您可以编辑的 css 文件以设置代码样式。

如果您想继续使用 create-react-app（有时称为 CRA）并使用 scss，那么您可以通过键入以下命令安装 Dart Sass 库：

 npm i sass --save-dev

（请记住 node-sass 已弃用，我们使用 Dart Sass 代替它）

有关如何一起使用 node-sass 和 CRA 的完整说明，请参阅“如何在 Create React App 中使用 SASS？”： https ://www.robinwieruch.de/create-react-app-with-sass-support

一旦你超越了 CRA，你就可以修改你自己的 webpack.config.js，它也可以设置为编译和导入 SCSS 文件。但是，如果您刚开始使用 React，那么您可能希望稍后再修改 webpack.config.js 并坚持使用 CRA。

原文由 Luke 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果使用 create-react-app 那么：

1）首先使用npm安装sass依赖：

npm install sass --save-dev

1. 将你的 sass 文件导入你的 componentName.js 文件

import '../scss/FileName.scss';

原文由 restricted-beam 发布，翻译遵循 CC BY-SA 4.0 许可协议