reactjs - css-loader 在导入 css 文件时返回未定义

Question

我有一个名为 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'],
},

没有任何效果。为什么它给出未定义？

Answer 1

类似问题在这里得到解答: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 并照此导入。