我刚刚开始学习 React（有一些 JavaScript 知识，因为我也在学习 tis）并开始构建我的第一个项目。我想知道如何使用 CSS/SCSS 为我的第一个 React 项目添加样式，因为我从我的 html、CSS/SCSS 学习项目中获得了一些知识和理解。
如何将 SCSS 添加到您的 React 项目中？
【问题讨论】：
如果使用 create-react-app 则：
1)首先使用npm安装sass依赖：
npm install sass
2) 将你的 sass 文件导入到你的 componentName.js 文件中
import '../scss/FileName.scss';
【讨论】：
如果您使用的是 create-react-app，只需添加 sass 作为开发依赖项。
yarn add -D sass 或 npm install --save-dev sass
然后只需将所有 CSS 文件和相应的导入替换/重命名为 *.scss 而不是 *.css
【讨论】：
使用 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。
【讨论】：
node-sass 已弃用
首先，在您的项目中安装 sass。然后将其导入到您的组件中。
安装 sass：
npm install sass
yarn add sass
在您的组件中导入：
import example from './example.scss'
【讨论】：
将 Sass 添加到 Create React App 的步骤是：
安装node-sass：
npm install node-sass
或
纱线添加节点-sass
将您的 .css 文件转换为 .scss
在您的 React 组件中导入您的 .scss 文件，例如 App.js
【讨论】：
你不需要。 它已经内置于 npx create-react-app
【讨论】：