Webpack构建的React组件库被引用时样式不生效该如何解决？

问题根因 #

• CSS loader顺序配置错误，style-loader与MiniCssExtractPlugin.loader功能互斥且配置顺序颠倒
• 未开启CSS Modules支持，导致import styles from './UiButton.module.css'拿到的是空对象，生成的DOM节点无对应类名，无法匹配样式规则
• 未配置组件库的样式导出规则，引用方无法正确加载打包后的样式文件

修复步骤 #

1. 修正Webpack CSS规则配置 #

Webpack loader执行顺序为从右到左，根据你是否需要单独打包CSS文件二选一配置：

方案A：单独打包CSS文件（推荐用于组件库）

用户引用时需手动引入CSS文件，修改webpack.config.js中CSS相关规则：

module.exports = {
  // 其余原有配置保持不变
  module: {
    rules: [
      // 原有js/jsx规则不变
      {
        test: /\.css$/,
        use:  [  
          MiniCssExtractPlugin.loader, 
          {
            loader: 'css-loader',
            options: {
              // 开启CSS Modules支持
              modules: {
                // 自定义生成的类名规则，可根据需求调整
                localIdentName: '[name]__[local]__[hash:base64:5]'
              }
            }
          }
        ]
      }
    ]
  },
  // 其余原有配置保持不变
}

方案B：样式内嵌到JS中，无需单独引用

适合轻量组件库，用户引用组件时自动注入样式，修改配置如下：

1. 移除MiniCssExtractPlugin相关的所有配置（包括plugins里的实例）
2. 修改CSS规则为：

{
  test: /\.css$/,
  use:  [  
    'style-loader', 
    {
      loader: 'css-loader',
      options: {
        modules: {
          localIdentName: '[name]__[local]__[hash:base64:5]'
        }
      }
    }
  ]
}

2. 配置组件库package.json导出规则 #

在组件库的package.json中添加如下字段，方便引用方识别入口和样式文件：

{
  "main": "dist/index.js",
  "style": "dist/index.css",
  "exports": {
    ".": "./dist/index.js",
    "./index.css": "./dist/index.css"
  }
}

3. 引用方使用要求 #

如果选择方案A单独打包CSS，引用方需要在项目入口文件中提前引入样式：

// 引入组件库样式
import 'uilibrarytest/dist/index.css'
// 引入组件使用
import { UiButton } from 'uilibrarytest'

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