编译正常但React中CSS Modules导入无效问题求助

我之前也碰到过一模一样的情况！编译没报错但样式就是不生效，大概率是这几个原因，咱们一个个排查：

1. 文件名不符合CSS Modules的识别规则 #

React（尤其是Create React App脚手架）默认只会把**后缀为.module.css**的文件当作CSS Modules处理。你现在用的是App.css，这只是普通的CSS文件，导入的styles对象其实没有被正确生成模块化类名。

解决办法：

• 把App.css重命名为App.module.css
• 同步修改导入语句：

  import styles from '../App.module.css'
  

2. 类名拼写/大小写不匹配 #

CSS Modules是严格匹配类名的，检查你的App.module.css里是不是写的：

.button {
  /* 你的样式代码 */
}

如果CSS里是.Button（首字母大写），那组件里就得用styles.Button，大小写完全对应才行。

3. 自定义Webpack配置未开启CSS Modules（非CRA项目） #

如果是你自己配置的Webpack而不是用Create React App，得确保css-loader开启了模块化选项：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true, // 必须开启这个配置
            },
          },
        ],
      },
    ],
  },
};

4. 验证styles对象是否正确生成 #

可以在组件里加个日志，看看styles里到底有没有button属性：

import React from 'react'
import styles from '../App.module.css'

console.log(styles) // 查看控制台输出的对象结构

const Button = () => (
  <button className={styles.button}>点击我</button>
)
export default Button;

如果控制台里styles是空对象或者没有button，那就是文件没被正确识别，回到第一步检查文件名。

最后记得重启一下开发服务器，有时候缓存会导致修改不生效哦！

内容的提问来源于stack exchange，提问作者Clausys Tom