Question

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

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

            },

但是当我在我的应用程序中导入一个css文件并尝试将其用于像classnames这样的类名时，它就不会链接到我的css文件中的.example。这就是我这样做的方式

import styles from './TestPage.css'

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

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

Answer 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>
    )

};

Answer 2

您的问题可能是由于旧的react-scripts版本造成的。只需将您的react-scripts版本更新到2.0.3以上即可。

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

CSS模块无法处理反应组件

2 个答案: