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

【问题标题】：Using sass-loader won't import classes dynamically in React使用 sass-loader 不会在 React 中动态导入类
【发布时间】：2020-01-10 14:41:48
【问题描述】：

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

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

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

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

我找到了一个名为 sass-loader 的模块来处理请求，但在完成了他们指南中的步骤后 - 它仍然无法工作。

【问题讨论】：

【解决方案1】：

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

1) 首先安装node-sass 模块。

npm install node-sass

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

App.module.scss

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

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

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

<div className={classes.App}>

【讨论】：

成功了，谢谢！但是，有没有办法在不更改scss 文件扩展名的情况下解决它？在项目Ambar（上面的链接）上，他们似乎只是用一个简单的.scss 扩展名调用了他们的scss 文件。
据我所知，您必须添加 .module.scss 扩展名。这就是CSS Modules 的工作原理。 @YanivGK
我认为它与webpack.config.js 设置有关。有一个与css extension 相关的正则表达式，它在sass-loader 的文档中有所提及。因为我使用react-scripts 来管理设置而不是webpack - 我决定使用module.scss 解决方案。所以我会解决这个问题 - 再次感谢。