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

IT技术 css reactjs import sass
2021-05-08 03:28:15

我的目标是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 -SSCSS安装过程中使用了该命令

我发现称为sass-loader处理请求的module,但在完成他们指南中的步骤后 - 它仍然无法正常工作。

1个回答

这种结构称为CSS Modules如果您使用create-react-app,请应用这些步骤。

1) 首先安装node-sassmodule。

npm install node-sass

2)SCSS使用.module.scss 扩展名保存您的文件例如:

App.module.scss

3) 像这样导入这个文件:

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

4)现在,您可以像这样应用您的样式:

<div className={classes.App}>