Vue项目引入Vuetify后编译卡在40%无法继续，如何排查解决？

编译卡住的核心原因 #

• sass-loader配置重复冲突：你提供的webpack配置中，.s(c|a)ss匹配规则的sass-loader下重复声明了两次options字段，会导致sass-loader解析配置异常，编译进程在处理样式文件阶段（正好对应你看到的40%进度）进入死锁或无限等待。
• 额外引入的变量文件不存在：配置的sassLoaderOptions里主动追加了@import "~@/_variables.scss"的全局引入规则，如果你项目的src目录下没有创建对应的_variables.scss文件，sass编译会因找不到导入资源卡住，不会主动抛出错误中断进程。
• 重复的sass文件匹配规则冲突：配置中同时存在.s(c|a)ss、.sass、.scss三个重叠的匹配规则，Vuetify的样式文件会被多个loader规则重复处理，引发编译阻塞。
• 你修改了node_modules/vuetify-loader下的配置文件，这种操作本身不符合工程规范，默认的vuetify-loader不需要手动修改内部配置，修改后的冲突配置会覆盖正常的vuetify样式解析逻辑。

解决步骤 #

1. 恢复vuetify-loader的默认配置，删除你对node_modules/vuetify-loader/dev4/webpack-config.js的修改，或者直接删除整个node_modules目录重新执行npm install还原依赖的默认状态，不要直接修改node_modules内的依赖文件，所有自定义配置都应该在项目根目录的vue.config.js中编写。
2. 修正项目webpack配置，删除重复的.s(c|a)ss匹配规则，保留独立的.sass和.scss规则即可，同时删掉sass-loader里重复的options字段，修正后的sass相关规则参考：

module.exports = {
  module: {
    rules: [
      {
        test: /\.sass$/,
        use: [
          'vue-style-loader',
          { loader: 'css-loader',  options: { esModule: false } },
          {
            loader: 'sass-loader',
            options: {
              implementation: require('sass'),
              sassOptions: { indentedSyntax: true },
              // 如果你没有_variables.scss就删掉下面这行
              // additionalData: `@import "~@/_variables.scss"`
            }
          }
        ]
      },
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          { loader: 'css-loader',  options: { esModule: false } },
          {
            loader: 'sass-loader',
            options: {
              implementation: require('sass'),
              sassOptions: { indentedSyntax: false },
              // 如果你没有_variables.scss就删掉下面这行
              // additionalData: `@import "~@/_variables.scss";`
            }
          }
        ]
      }
    ]
  }
}

3. 如果不需要自定义Vuetify全局变量，直接删除sassLoaderOptions里的additionalData配置，或者在src目录下创建空的_variables.scss文件即可。
4. 清除缓存后重新编译：执行npx vue-cli-service serve --reset-cache启动开发服务，验证编译进度是否正常。

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