Vue.js项目集成CSS Modules遇CSS Loader验证失败编译报错求助

我之前也碰到过一模一样的问题，根源是css-loader版本与vue-loader/vue-style-loader的配置不兼容。报错提示options has an unknown property 'localIdentName'，是因为你当前用的css-loader（v3+版本）要求localIdentName必须嵌套在modules对象里，但你的vue-loader可能还在沿用旧配置逻辑，把localIdentName作为顶层选项传递给css-loader，触发了schema验证失败。

下面是一步步的解决方案：

1. 先检查依赖版本兼容性 #

首先确认你的css-loader、vue-loader和vue-style-loader版本是否匹配：

npm list css-loader vue-loader vue-style-loader

如果css-loader是v3+，但vue-loader版本低于15.9.0，就会出现这个兼容问题——vue-loader在15.9.0版本之后才支持css-loader v3+的模块化配置方式。

2. 更新相关依赖 #

把vue-loader和vue-style-loader更新到兼容版本：

npm update vue-loader vue-style-loader --save-dev

如果更新后还是有问题，可以指定明确的兼容版本：

npm install vue-loader@^15.9.8 vue-style-loader@^4.1.3 --save-dev

3. 修正webpack配置 #

确保你的css-loader配置正确，同时添加importLoaders选项（指定后续有1个loader需要处理，这里是sass-loader），避免加载顺序问题：

{ 
  test: /\.scss$/, 
  use: [ 
    'vue-style-loader', 
    { 
      loader: "css-loader", 
      options: { 
        modules: { 
          localIdentName: 'MyApp__[local]--[hash:base64:5]', 
        },
        importLoaders: 1, // 关键：确保sass-loader能正确处理导入的scss文件
        sourceMap: false
      } 
    }, 
    'sass-loader' 
  ], 
}, 
{ 
  test: /\.sass$/, 
  use: [ 
    'vue-style-loader', 
    { 
      loader: "css-loader", 
      options: { 
        modules: { 
          localIdentName: 'MyApp__[local]--[hash:base64:5]', 
        },
        importLoaders: 1,
        sourceMap: false
      } 
    }, 
    'sass-loader?indentedSyntax' 
  ], 
}

4. （可选）Vue CLI项目用CLI配置替代手动webpack修改 #

如果你是用Vue CLI创建的项目，建议直接在vue.config.js中配置CSS Modules，避免手动修改webpack配置带来的冲突：

module.exports = {
  css: {
    modules: {
      localIdentName: 'MyApp__[local]--[hash:base64:5]'
    },
    loaderOptions: {
      scss: {
        // 这里可以添加sass全局变量等额外配置
      }
    }
  }
}

完成这些步骤后，重新启动开发服务，应该就能解决编译错误了。

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