如何仅对特定文件夹内的所有 css 文件应用模块明智的类映射

Question

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

我添加了下面的代码，但它不起作用

  {
    test: /.css$/i,
    use: [
      "style-loader", 
      //"css-loader"
      {
          loader: "css-loader",
          options: {
            importLoaders : 1,
            modules: {
              //localIdentName: "[name][local][hash:base64:5]",
              //localIdentContext: path.resolve(dirname, "src/styles"),
              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,
          },
      }
    ],
    
  },

我的Reactjs文件夹结构示例如下

src
 styles // Webpack dynamic class should apply for all classes inside this only
  contact.css
  about.css
global.css // Dont apply webpack dynamic class

Answer 1

我已经使用以下代码实现了

{
    test: /\.(css|scss)$/,
    use: [
      'style-loader',
      {
        loader: 'css-loader',
        options: {
          importLoaders: 1,
          modules: {
            localIdentName: "[name]__[local]___[hash:base64:5]",
          },
          sourceMap: false
        }
      }
    ],
    include: /\.module\.css$/
  },
  {
    test: /\.(css|scss)$/,
    use: [
      'style-loader',
      //'css-loader'
      {
        loader: 'css-loader',
        options: {
          sourceMap: false
        }
      }
    ],
    exclude: /\.module\.css$/
  },

注意：应用模块的 css 文件的文件名应为 [yourname].module.css，并将其包含在组件中 例如AboutComponent和COtactComponent添加css如下 about.module.css 和 contact.module.css