使用<style lang="scss" scoped>后webpack报规则资源源冲突错误如何解决

这个报错是项目内存在多版本webpack冲突导致：Vue CLI 3/4 本身已经内置了对应版本的webpack，你手动额外安装webpack后，会出现两套webpack实例同时加载的情况，配置规则判定重复就会触发Rule can only have one resource source错误。你之前修改webpack版本的操作反而放大了版本冲突问题。

按以下步骤操作即可修复：

• 第一步：移除手动安装的webpack，删除依赖缓存
  执行以下命令：

  # 移除手动安装的webpack相关依赖
  npm uninstall webpack webpack-cli
  # 删除现有依赖包和lock文件，避免版本残留
  rm -rf node_modules package-lock.json
  # 如使用yarn，对应执行以下命令
  # yarn remove webpack webpack-cli
  # rm -rf node_modules yarn.lock
  

• 第二步：安装匹配Vue CLI版本的SCSS相关依赖
  不需要手动安装webpack，仅需安装scss对应的编译依赖即可，注意不要安装过高版本避免和内置webpack4不兼容：

  npm install sass@~1.32.0 sass-loader@~10.1.0 --save-dev
  

• 第三步：重装所有项目依赖

  npm install
  

• 第四步：重启开发服务，测试<style lang="scss" scoped>是否正常生效。

如果执行上述步骤后问题依旧存在，检查项目根目录的vue.config.js配置：

webpack的同一条规则中只能使用resource或者test+include+exclude其中一种资源匹配方式，不能同时配置两类匹配规则，如果复用的GitHub代码里的自定义webpack配置同时写了两类规则，删掉其中一组即可。

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