如何在Webpack+TypeScript中同时配置常规CSS与CSS Modules？

你需要拆分出两条webpack规则，分别处理常规CSS文件和CSS Modules文件，具体配置如下：

完整配置代码 #

// 常规CSS文件规则（匹配所有.css，但排除.module.css）
{
  test: /\.css$/i,
  exclude: /\.module\.css$/i,
  use: [
    {
      loader: isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
    },
    'css-loader',
    'postcss-loader',
  ],
},
// CSS Modules文件规则（仅匹配.module.css）
{
  test: /\.module\.css$/i,
  use: [
    {
      loader: isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
    },
    {
      loader: 'css-loader',
      options: {
        // 启用CSS Modules
        modules: {
          // 自定义类名格式，开发环境保留原类名便于调试，生产环境用哈希值压缩
          localIdentName: isDev 
            ? '[name]_[local]_[hash:base64:5]' 
            : '[hash:base64:8]',
        },
      },
    },
    'postcss-loader',
  ],
},

关键说明 #

• 两条规则通过exclude和精准的test匹配区分文件类型，避免互相干扰
• CSS Modules规则中，给css-loader添加modules配置项启用模块化功能：
  • localIdentName用于定义编译后的类名格式，开发环境保留原文件名和类名方便调试，生产环境用短哈希值减少文件体积
• 使用方式保持区分：
  • 常规CSS直接通过import './xxx.css'全局引入
  • CSS Modules需按模块化方式导入：import styles from './xxx.module.css'，通过styles.className调用类名

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