reactjs - CSS模块不适用于反应组件

Question

我正在尝试在我的 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>

这是行不通的。

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

Answer 1

您需要重命名文件

从filename.css 到 filename.module.css

用法：

login.module.css

.login {
    background-color: red;
}

登录.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