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

Question

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

我似乎在Ambar opensource中有几种用法，并且希望在我的项目中做类似的事情。

// 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的模块来处理请求，但是在完成指南中的步骤后-它仍然无法正常工作。

Answer 1

此结构称为 CSS模块。如果您使用result.value，请执行以下步骤。

1）首先安装create-react-app模块。

node-sass

2）使用npm install node-sass 扩展名保存您的SCSS文件。例如：

.module.scss

3）像这样导入该文件：

App.module.scss

4）现在，您可以应用如下样式：

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