css - React-css-modules: styleName is not recognized

Question

I have a problem with react-css-modules. I am not able to find the classes that I have bound by the styleName. They do not appear as classes in the rendered html.

Here is the code:

import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './ListItem.css'

@CSSModules(styles)
export class ListItem extends React.Component {
    render() {

        return (
            <li className="panel" styleName="list-item">
                <h3 className="uppercase m-t-0 m-b-0 relative" styleName="title">
                ...

                </h3>
            </li>);
        }
}

And the webpack configuration:

     module: {
        loaders: [
            ...
            {
                test: /\.css$/,
                loaders: [
                    require.resolve('style-loader'),
                    require.resolve('css-loader') + '?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
                ]
            },
            ...
         ]
      }

So what is wrong here?

Answer 1

如果有帮助，这是我在 webpack 配置中的加载器数组：

loaders: [
            'style?sourceMap',
            'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
          ]

也许在 styleLoader 而不是 css 加载器中使用的 sourceMap 与它有关。

此外，您可以尝试避免使用注释@CSSModules(styles)并使用正常方式，例如export default CSSModules(ListItem, styles)查看注释是否存在问题。

除此之外，我看不出有什么问题。