Vue.js项目vue.config.js配置全局Sass样式不生效如何解决

• 网上搜到的旧教程适配的是sass-loader@7及更早版本，从v8版本开始，原来的data配置项已经被重命名为prependData，字段名不对自然不会生效
• 默认生成的vue.config.js是通过defineConfig包裹配置对象的，自定义配置必须放在这个对象的属性里，直接在外层拼接、或者删除defineConfig包裹的写法都不符合新版Vue CLI的配置规范
• 很多人会搞混sass和scss的loader配置项：.scss是大括号语法的常规Sass文件，对应的配置要写在scss字段下，直接写在sass字段下不会对scss文件生效

• 先确认项目已安装Sass相关依赖，没装的话先执行安装命令：

npm install sass sass-loader -D
# 用yarn的话就执行 yarn add sass sass-loader -D

• 替换vue.config.js内容为如下配置，保留原有默认的transpileDependencies配置，把css相关配置合并到同一个配置对象里：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  css: {
    loaderOptions: {
      // 适配.scss后缀文件
      scss: {
        prependData: `@import "@/sass/test.scss";`
      },
      // 如果你同时用到.sass缩进语法后缀的文件，再加这段配置
      sass: {
        prependData: `@import "@/sass/test.scss";`
      }
    }
  }
})

• 修改完vue.config.js必须手动重启本地开发服务，配置文件的改动不会触发热更新，不重启永远不会生效
• 全局引入的test.scss里不要写会输出实际CSS的样式规则，否则每个组件都会重复打包这段样式，全局文件建议只存放变量、mixin、函数这类不会编译出实体CSS的内容
• 如果启动后报路径找不到的错误，可以把导入路径改成带~前缀的写法：prependData: `@import "~@/sass/test.scss";` ，~符号会告诉webpack从node_modules和src别名路径开始解析

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