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

Posted 2023-03-06

【中文标题】如何将 SCSS 样式添加到 React 项目？

【英文标题】：How to add SCSS styles to a React project?

【发布时间】：2021-07-24 21:22:20

【问题描述】：

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

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

【问题讨论】：

在此处创建 React 应用文档：create-react-app.dev/docs/adding-a-sass-stylesheet

【参考方案1】：

如果使用 create-react-app 则：

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

npm install sass

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

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

【讨论】：

和其他人的回答有什么不同：node-sass？

Node-sass 已被弃用，您应该使用 sass。

【参考方案2】：

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

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

然后只需将所有 CSS 文件和相应的导入替换/重命名为 *.scss 而不是 *.css

【参考方案3】：

使用 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

（请记住，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。

【讨论】：

为什么要自己设置 webpack 和 babel？这似乎是一个艰巨的过程。您从手动操作中获得了哪些配置优势？举个例子吧……如果可以的话。

node-sass 已弃用

【参考方案4】：

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

安装 sass：

使用 npm： npm install sass 使用纱线 yarn add sass

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

【参考方案5】：

将 Sass 添加到 Create React App 的步骤是：

安装node-sass：

npm install node-sass

或

纱线添加节点-sass

将您的 .css 文件转换为 .scss

在您的 React 组件中导入您的 .scss 文件，例如 App.js

【参考方案6】：

你不需要。 它已经内置于 npx create-react-app