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

Question

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

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

Answer 1

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

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

npm install sass --save-dev

2）将你的sass文件导入到你的componentName.js文件中

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

Answer 2

使用 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 的完整说明，请参阅“如何在创建 React 应用程序中使用 SASS？”：https:// /www.robinwieruch.de/create-react-app-with-sass-support

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

Answer 3

如果您使用 create-react-app，只需添加 sass 作为开发依赖项。

yarn add -D sass或者npm install --save-dev sass

然后只需替换/重命名所有 CSS 文件和相应的导入*.scss即可*.css

Answer 4

首先，在你的项目中安装 sass。然后将其导入到您的组件中。

安装萨斯：

1. 使用 npm： npm install sass
2. 使用纱线 yarn add sass

导入您的组件： import example from './example.scss'