在 vue.config.js 文件中配置 css.loaderOptions 选项，官网地址：https://cli.vuejs.org/zh/guide/css.html#向预处理器-loader-传递选项 (opens new window)

安装 sass 相关依赖

npm install node-sass --save --dev      # ^4.12.0
npm install sass-loader --save --dev   # ^10.1.1

使用vue-cli官方配置

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      // 给 sass-loader 传递选项
    //   sass: {
    //     // @/ 是 src/ 的别名
    //     // 所以这里假设你有 `src/variables.sass` 这个文件
    //     // 注意：在 sass-loader v8 中，这个选项名是 "prependData"
    //     additionalData: `@import "@/style/variables.sass"`
    //   },
      // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
      // 因为 `scss` 语法在内部也是由 sass-loader 处理的
      // 但是在配置 `prependData` 选项的时候
      // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
      // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
      scss: {
        additionalData: `@import "@/style/variables.scss";`
      },
      // 给 less-loader 传递 Less.js 相关选项
    //   less:{
    //     // http://lesscss.org/usage/#less-options-strict-units `Global Variables`
    //     // `primary` is global variables fields name
    //     globalVars: {
    //       primary: '#fff'
    //     }
    //   }
    }
  }
}

定义全局变量

在 src/style/variables.scss 中定义了如下的全局变量：

$font-color: red;

使用定义碧昂量

<template>
 <h1>标题</h1>
</template>

<script>
export default {
  name: "login",
  components: {},
  data() {
    return {};
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
h1{
  color: $font-color;
}
</style>

注意

若出现错误 ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema 此报错，需提升 sass-loader 的版本到 ^10.1.1 即可。