如何仅对指定文件夹内的所有CSS文件应用模块级类映射

要实现仅对src/styles下的CSS文件启用模块级类映射，同时排除根目录的global.css，需要将Webpack的CSS规则拆分为两个独立配置，分别处理不同路径的文件：

具体配置代码 #

const path = require('path');

module.exports = {
  // 其他Webpack配置...
  module: {
    rules: [
      // 规则1：处理src/styles目录下的CSS文件，启用CSS Modules
      {
        test: /\.css$/i,
        include: path.resolve(__dirname, 'src/styles'), // 精准匹配目标目录
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              importLoaders: 1,
              modules: {
                mode: "local",
                auto: true,
                exportGlobals: true,
                localIdentName: "[name][local]__[hash:base64:5]",
                localIdentContext: path.resolve(__dirname, "src/styles"),
                localIdentHashSalt: "my-custom-hash",
                namedExport: true,
                exportLocalsConvention: "camelCase",
                exportOnlyLocals: false,
              },
              sourceMap: true,
            },
          }
        ],
      },
      // 规则2：处理其他CSS文件（如根目录的global.css），禁用CSS Modules
      {
        test: /\.css$/i,
        exclude: path.resolve(__dirname, 'src/styles'), // 排除已被规则1处理的文件
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              importLoaders: 1,
              modules: false, // 明确禁用模块映射
              sourceMap: true,
            },
          }
        ],
      },
    ],
  },
};

配置说明 #

• 规则1：通过include限定仅处理src/styles下的CSS文件，保留你原本配置的CSS Modules参数，确保该目录下的类名被自动映射为唯一哈希类名。
• 规则2：通过exclude排除src/styles目录，对剩余的CSS文件（如根目录的global.css）禁用modules，保持样式的全局生效特性。
• Webpack规则按从上到下顺序匹配，因此需将精准匹配的规则1放在前面，避免被规则2提前拦截。

原配置问题分析 #

你之前的单一规则会匹配所有.css文件，导致global.css也被应用了模块级类映射，破坏了全局样式的作用范围。拆分规则后可以精准控制不同路径文件的处理逻辑。

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