Question

我有一个名为App.css的css文件，该文件具有

之类的css。

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

我正在导入它，并在我的react app中使用

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？

Answer 1

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

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

[名称] .module.css

尝试将文件重命名为：Catalog.module.css，然后像这样导入：

从“ ./Catalog.module.css”导入样式；

在您的情况下，应将其命名为App.module.css并以此进行导入。

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

1 个答案: