我有一个名为 App.css 的 css 文件,其中的 css 类似于
.abcd {
margin-top: 50px !important;
color: red !important;
}
我正在导入它并在我的 react 应用程序中使用
import styles from './App.css'
console.log("style", styles) // it gives object.
<div className={"ui equal width grid " + styles.abcd}>
</div>
这里styles.abcd
显示未定义
,但是当我控制台styles
时,它在数组上给出了具有该类名的对象。我不知道什么此处缺失。
我的 webpackconf 看起来像:
{
test: /\.css$/,
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[path][name]__[local]--[hash:base64:5]',
},
},
我也尝试过
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
没有任何效果。为什么它给出未定义
?
最佳答案
类似问题在这里得到解答:CSS Modules class names undefined
In the docs, it's mentioned that you have to name the file as follow :
[name].module.css
Try renaming the file to : Catalog.module.css and import it like this :
import styles from './Catalog.module.css';
在您的情况下,您应该将其命名为 App.module.css 并照此导入。
关于reactjs - css-loader 在导入 css 文件时返回未定义,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53726341/