Vue CLI搭建的Vue3项目出现SASS Loader无法解析报错，求使用教程

SASS Loader cant be resolved报错的核心原因是缺失sass-loader依赖，或依赖版本与Vue CLI版本不兼容，按以下步骤操作即可正常使用：

步骤1：清理冲突依赖 #

先卸载已安装的不兼容sass相关依赖，避免版本冲突：

npm uninstall sass sass-loader node-sass

步骤2：安装匹配版本的依赖 #

Vue CLI对高版本sass-loader兼容性较差，推荐安装12.x版本的sass-loader，配合官方主推的dart-sass（即sass包，已停止维护的node-sass无需安装）：

npm install sass sass-loader@12 --save-dev

步骤3：组件内使用SASS #

安装完成后直接在Vue组件的style标签上声明lang="scss"即可使用SASS语法：

<template>
  <div class="card">
    <span class="card-title">测试样式</span>
  </div>
</template>

<style lang="scss" scoped>
// 支持SASS变量、嵌套等语法
$theme-color: #165DFF;
.card {
  padding: 20px;
  border-radius: 4px;
  .card-title {
    color: $theme-color;
    font-weight: bold;
  }
}
</style>

步骤4：全局SASS变量配置（可选） #

如果需要全局通用SASS变量、混合宏等，可在项目根目录的vue.config.js中添加如下配置（无该文件可直接新建）：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  css: {
    loaderOptions: {
      scss: {
        // 此处替换为你自己的全局SASS文件路径即可
        additionalData: `@import "~@/assets/styles/global.scss";`
      }
    }
  }
})

异常排查 #

• 若安装后仍报错，删除项目根目录的node_modules文件夹和package-lock.json文件，重新执行npm install即可
• 禁止安装node-sass依赖，该包已停止维护，兼容性差，直接使用sass包即可

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