Webpack项目中CSS类无法应用于React组件问题求助

问题场景 #

基于Webpack、Lit2和React的项目中，React组件CustomDivider使用CSS Modules导入样式，代码如下：

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

export const CustomDivider = () => {
  return (
    <>
      <hr className={styles.customDivider}></hr>
    </>
  );
};

Webpack配置针对模块化和非模块化CSS分别配置了loader：

// For our css modules these will be locally scoped
const CSSModuleLoader = {
  loader: 'css-loader',
  options: {
    modules: {
      localIdentName: '[name]_[local]_[hash:base64:5]',
    },
    importLoaders: 1,
    sourceMap: false, // turned off as causes delay
  }
}
// For our normal CSS files we would like them globally scoped
const CSSLoader = {
  loader: 'css-loader',
  options: {
    importLoaders: 1,
    sourceMap: false, // turned off as causes delay
  }
}

// Standard style loader (prod and dev covered here)
const styleLoader = devMode ? 'style-loader' : MiniCssExtractPlugin.loader;

module.exports = {
  entry: {
    app: './index-app.js',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react'],
          },
        },
      },
      {
        test: /\.css$/,
        exclude: /\.module\.css$/,
        use: [styleLoader, CSSLoader]
      },
      {
        test: /\.module\.css$/,
        use: [styleLoader, CSSModuleLoader]
      }
    ],
  },
  resolve: {
    extensions: ['.*', '.js', '.jsx'],
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './index.html',
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css",
    }),
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'build'),
    clean: true,
  },
};

构建后浏览器中<hr>元素已生成对应类名，但样式面板无该类规则，样式不生效，控制台无报错。尝试修改Webpack配置、重装依赖、改用全局CSS均无效。

排查步骤 #

1. 确认CSS模块是否被正确打包 #

• 打开构建后的build目录，检查生成的CSS文件（如app.css）中是否包含homesheet.module.css的样式规则（类名是哈希化后的格式，比如homesheet_customDivider_xxxxxx）。
• 如果CSS文件中无对应规则：
  • 验证组件中../homesheet.module.css的路径是否正确，确保文件存在且路径无误。
  • 调整Webpack规则顺序，将.module.css的规则放在普通CSS规则之前，避免规则匹配优先级问题。

2. 排查Lit2与CSS处理的冲突 #

• Lit2自带Shadow DOM样式处理，若项目中配置了Lit相关的CSS loader（如lit-css-loader），可能会拦截.css文件导致React的CSS模块未被正确解析：
  • 给Lit组件的CSS文件设置专属后缀（如.lit.css），并在Webpack规则中仅对该后缀使用Lit的loader，与React的CSS Modules文件做区分。

3. 验证MiniCssExtractPlugin的配置 #

• 确认devMode变量是否被正确赋值：
  • 开发环境下强制使用style-loader（暂时注释掉MiniCssExtractPlugin相关配置），看样式是否通过内联<style>标签生效，排除CSS提取插件的问题。
  • 若使用MiniCssExtractPlugin，检查HTML文件是否正确引入了提取后的CSS文件。

4. 核对CSS类名的一致性 #

• 在组件中添加console.log(styles.customDivider)，打印生成的类名，与浏览器元素上的类名、打包后CSS文件中的类名做完全匹配（注意大小写、哈希值是否一致）。
• 检查css-loader的localIdentName配置是否存在特殊字符，导致类名解析异常。

5. 排查Babel或插件干扰 #

• 确认babel-loader的配置未影响ES模块导入，避免styles对象被篡改。
• 简化Webpack配置，暂时移除不必要的插件（如MiniCssExtractPlugin），逐步排查是否为插件组合导致的问题。

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