React-CSS-Modules失效求助：style返回空对象无报错

我来帮你排查下这个问题哈——你说调用console.log(styles)时得到的是一个已定义但空的对象，还没任何报错，结合你贴的Login.js代码片段，大概率是CSS Modules相关的配置或者使用环节出了问题，下面是几个可以尝试的排查方向：

1. 检查打包工具的CSS Modules配置 #

首先要确认你的打包工具（比如webpack）是否正确开启了CSS Modules功能。以webpack为例：

• 如果是webpack 4及以下，需要在css-loader的配置里加上modules: true，比如：

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true, // 开启CSS Modules
              localIdentName: '[name]__[local]--[hash:base64:5]' // 可选，自定义类名格式
            }
          }
        ]
      }
    ]
  }
  

• 如果是webpack 5，配置方式略有不同：

  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
        options: {
          modules: {
            mode: 'local' // 开启本地作用域的CSS Modules
          }
        }
      }
    ]
  }
  

如果配置没开，import styles from './Login.css'就会返回空对象。

2. 确认react-css-modules的使用是否正确 #

你引入了CSSModules高阶组件，但要确保组件导出时正确包裹，并且在JSX里用styleName替代className：

• 首先，组件导出时需要用CSSModules包裹，比如：

  // 在组件定义结束后添加
  export default CSSModules(Login, styles, { allowMultiple: true });
  // 如果还要结合connect，要注意顺序：先CSSModules再connect，或者反过来，看你的需求
  // 比如：export default connect(mapStateToProps)(CSSModules(Login, styles));
  

• 在JSX中使用样式时，要写styleName="你的CSS类名"，而不是className，比如：

  <Row styleName="login-row">
    <Col>...</Col>
  </Row>
  

3. 检查CSS文件本身和路径 #

• 确认./Login.css的路径是正确的，文件确实存在于当前目录下；
• 检查CSS文件里有没有语法错误（比如未闭合的大括号、拼写错误），虽然不会抛出JS报错，但可能导致样式无法被正确解析成对象；
• 确保CSS文件里有实际的类定义，比如：

  .login-row {
    padding: 20px;
  }
  

如果CSS文件是空的，那styles自然也是空对象。

4. 临时移除高阶组件测试 #

可以先去掉CSSModules，直接用原生CSS Modules的方式测试，看看styles是否有内容：

// 注释掉CSSModules相关代码
// import CSSModules from 'react-css-modules';

class Login extends Component {
  render() {
    console.log(styles); // 这里看看输出
    return (
      <Row className={styles.loginRow}> {/* 注意CSS类名会被转成驼峰 */}
        <Col>...</Col>
      </Row>
    )
  }
}

// export default Login;

如果这时候styles有内容，说明是react-css-modules的使用或配置问题；如果还是空，那肯定是打包工具的CSS Modules配置没生效。

你的Login.js组件代码片段：

import React, {Component} from 'react';
import {connect} from 'react-redux';
import PropTypes from 'prop-types';
import CSSModules from 'react-css-modules';
import { Row, Col } from 'antd';
import styles from './Login.css';
import Logo from '../../components/Logo/Logo';

class Login extends Component {
 constructor (props) {
 super(props);
 }
 render () {
 const {dispatch... // 代码未完成，但能看到核心引入部分
 }
}

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