CSS模块不适用于反应组件

Posted 2023-02-21

【中文标题】CSS模块不适用于反应组件

【英文标题】：CSS module not working on react component

【发布时间】：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 加载器。

【参考方案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