4

我有一个名为 App.css 的 css 文件，其中包含类似 css

.abcd {
    margin-top: 50px !important;
    color: red !important;
}

我正在导入这个并在我的反应应用程序中使用

import styles from './App.css'
console.log("style", styles) // it gives object. 

<div className={"ui equal width grid " + styles.abcd}>
</div>

这里styles.abcd正在显示undefined，但是当我控制台时styles，它会在数组上提供具有该类名的对象。我不知道这里缺少什么。

我的 webpack conf 看起来像：

{
    test: /\.css$/,
    loader: 'css-loader',
    options: {
        modules: true,
        localIdentName: '[path][name]__[local]--[hash:base64:5]',
    },
},

我也试过

{
    test: /\.css$/,
    use: ['style-loader', 'css-loader'],
},

没有任何工作。为什么要给undefined？

4

1 回答 1

1

在这里回答了类似的问题：CSS Modules class names undefined

在文档中，提到您必须将文件命名如下：

[名称].module.css

尝试将文件重命名为： Catalog.module.css 并像这样导入它：

从'./Catalog.module.css'导入样式；

在您的情况下，您应该将其命名为 App.module.css 并按原样导入。

于 2020-04-21T16:39:28.457 回答