React-css-modules：styleName 无法识别答案

【问题标题】：React-css-modules: styleName is not recognizedReact-css-modules：styleName 无法识别
【发布时间】：2016-11-06 04:34:27
【问题描述】：

我对 react-css-modules 有疑问。我无法找到由 styleName 绑定的类。它们不会在呈现的 html 中显示为类。

代码如下：

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>);
        }
}

还有webpack 配置：

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

那么这里出了什么问题？

【问题讨论】：

我不知道这是否是 css-modules 的事情，但通常在 React 中你会使用 className 向元素添加类属性。
styleName 来自 css-modules。
@AnoushHakobyan 你有没有想过这个问题？我也有同样的问题

标签： css reactjs react-css-modules

【解决方案1】：

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

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

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

另外，您可以尽量避免使用注解@CSSModules(styles) 并使用正常方式，例如export default CSSModules(ListItem, styles)查看注解是否有问题。

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

【讨论】：