cssModules配置無效，以及localIdentName和camelCase的配置

問題

在vue-loader的配置文件vue-loader.config.js中配置的cssModules無效，也沒報錯

環境

• vue-loader: 15.9.6
• webpack: 5.12.2
• css-loader: 5.0.1

原因

配置的方式做了修改，vue-loader版本的原因

解決

vue-loader在v14以后修改配置的位置，在 css-loade 的模塊options中配置，CSS Modules 現在需要通過 css-loader 選項顯式地配置。style 標簽上的 module 特性仍然需要用來局部注入到組件中。

在新版本的 css-loader 中，localIdentName不再與modules平級，而是變成了modules的屬性。

查看webpack版本進行配置。

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: 'css-loader',
        options: {
          modules: {
            localIdentName: '[path][name]__[local]--[hash:base64:5]',
            exportLocalsConvention: "camelCase",
          }
        }
      }
    ]
  }
}

參考

Vue Loader在v14以后的css Modules配置

webpack5官方文檔-css-loader