CSS Loader配置不符合API schema问题排查（create-react-app项目）

嘿，我一眼就看出问题出在哪了——你用的是css-loader v3.1.0，这个版本的API配置和旧版本不一样啦！

问题根源 #

你收到的ValidationError明确说了：options has an unknown property 'localIdentName'，这是因为从css-loader v3.x开始，localIdentName不再是直接放在options根节点的配置项了，它必须嵌套在modules对象里。看你的package.json，确实装的是css-loader: "^3.1.0"，刚好踩中了这个版本变更的坑。

具体修复方法 #

1. 先找到项目里配置css-loader的文件：如果你是用create-react-app且执行过eject，那配置文件在config/webpack.config.dev.js和config/webpack.config.prod.js里；如果是自己配的webpack，那就在你的webpack配置文件中。
2. 把原来的css-loader配置从这样：

{
  loader: 'css-loader',
  options: {
    localIdentName: '[name]__[local]___[hash:base64:5]',
    // 其他你原来的配置...
  }
}

改成这样：

{
  loader: 'css-loader',
  options: {
    modules: {
      localIdentName: '[name]__[local]___[hash:base64:5]'
    },
    // 其他你原来的配置...
  }
}

针对create-react-app的额外提示 #

如果你还没执行eject，其实不用手动改webpack配置：

• 只要把你的CSS文件命名成[文件名].module.css的格式，create-react-app会自动启用CSS Modules，并且默认就有类似的命名规则
• 要是你一定要自定义localIdentName，那得先跑npm run eject把配置暴露出来，再按上面的步骤修改

验证一下 #

改完配置后，重启开发服务器：

npm start

这下应该就能正常编译，不会再报那个错误啦！

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