CSS模块不适用于反应组件答案

【问题标题】：CSS module not working on react componentCSS模块不适用于反应组件
【发布时间】：2017-11-06 05:11:09
【问题描述】：

我正在尝试在我的 reactjs 应用程序中使用 css 模块。我已经在webpack.config 文件中添加了加载器。

 {
                test: /\.css$/,
                loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'

            },

但是当我在我的应用程序中导入一个 css 文件并尝试将它用于 classNames 时，例如 {styles.example} 然后它不会链接到我的 css 文件中的 .example。

这就是我的做法：

import styles from './TestPage.css'

<div className={styles.example}></div>

这不起作用。

组件没有样式。我在控制台中没有收到任何错误。我该如何解决？

【问题讨论】：

尝试将样式更改为样式加载器
没用。
可能你的加载器不合适。更换加载器后测试
试试这个 { test: /\.css$/, loader: 'style-loader!css-loader'}
这不会激活 css loader 的模块模式。这只是一个 css 加载器。

标签： reactjs css-modules css-loader react-css-modules

【解决方案1】：

您需要重命名文件

从 filename.css 到 filename.module.css

用法：

login.module.css

.login {
    background-color: red;
}

Login.js

import styles from './login.module.css';

const login = (props) => {
    return (
            <div className={styles.login} >
                Login Card
            </div>
    )

};

【讨论】：

【解决方案2】：

你的问题可能是因为旧的 react-scripts 版本。只需更新你的 react-scripts 版本超过 2.0.3。

npm install --save-dev --save-exact react-scripts@2.0.3

【讨论】：