vue如何定义全局scss变量

要在 Vue 中定义全局的 SCSS 变量，可以使用以下步骤：

1. 在项目中安装 `sass-loader` 和 `node-sass`。

npm install sass-loader node-sass --save-dev

2. 在 `vue.config.js` 文件中添加以下代码，用于引入 SCSS 变量文件：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "~@/assets/scss/variables.scss";`
      }
    }
  }
};

3. 在 `src/assets/scss/` 目录下创建 `variables.scss` 文件，并在其中定义全局的 SCSS 变量，例如：

$primary-color: #007bff;
$secondary-color: #6c757d;

4. 在 Vue 组件中使用定义的全局 SCSS 变量，例如：

<template>
  <div class="example">
    <h1 style="color: $primary-color;">Hello World</h1>
  </div>
</template>

<style lang="scss">
.example {
  background-color: $secondary-color;
}
</style>

这样就可以在 Vue 项目中定义全局的 SCSS 变量了。