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文件链接到。实例。

这就是我的做法：

import styles from './TestPage.css'

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

这是行不通的。

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

Answer 1

您需要重命名文件

从filename.css 到 filename.module.css

用法：

登录.module.css

.login {
    background-color: red;
}

登录.js

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

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

};