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