使用 sass-loader 不会在 React 中动态导入类

我的目标是导入scss-classes使用动态类。

我见过几种用法，例如安巴尔开源 https://github.com/RD17/ambar/blob/master/FrontEnd/src/components/BasicComponents/FileAvatar/FileAvatar.js，并希望在我的项目中做类似的事情。

// App.js
import classes from './App.scss'
...
<div className={classes.App}/>

// App.scss
.App {
  text-align: center;
}

• 问题是那些css不会发生变化，使用dev-tools我可以看到这些类都不是 HTML 的一部分。

• 改变className='App'， 将工作。

• 我已经使用了命令npm install node-sass -S为了SCSS安装过程。

我发现模块名为sass-loader https://www.npmjs.com/package/sass-loader处理请求，但完成其指南上的步骤后 - 它仍然无法工作。

这个结构被称为CSS 模块。如果你使用create-react-app，应用这些步骤。

1）首先安装node-sass module.

npm install node-sass

2）保存你的SCSS文件与.module.scss 扩大。例如：

App.module.scss

3）像这样导入这个文件：

import classes from "./App.module.scss";

4）现在，您可以像这样应用您的样式：

<div className={classes.App}>