先展示结果

统一用的html

<template>
  <div class="home">
    <h1>Gordon-Liu</h1>
    <h2 ref="h2">Gordon-Liu</h2>
    <h3>Gordon-Liu</h3>
  </div>
</template>

1、scss引入其他scss变量

test.scss文件

						//定义scss变量
$color1: red;
$color2: blue;
$color3: var(--test);

:export {				//暴露scss变量
  newColor1: $color1;
  newColor2: $color2;
  newColor3: $color3;
}

引入index.scss文件

@import './test.scss'

引入在main.js文件

import './style/index.scss'

2、vue文件中的scss引入并使用

@import '../style/test.scss';
  .home {
    h1 {
      color: $color1;
    }
  }

3、在js中引入并使用scss中的变量

 import scss from '../style/test.scss'

 data(){
    return {
      blue: scss.newColor2
    }
  },
  mounted() {
    this.cutColor();
  },
  methods: {
    cutColor() {
      this.$refs.h2.style.color = this.blue;
    }
  }

4、js动态修改scss变量

看了很多网上的代码都是下面这样的

我试了几遍效果没出来，解决办法如下：
test.scss文件中的代码：

//用var来盛放--test变量名，用于js做动态修改，这里将后面的默认值去掉了后才可达到效果
$color3: var(--test);

vue文件夹中的使用

  mounted() {
    this.cutColor();
  },
  methods: {
    cutColor() {
      document.getElementsByTagName('body')[0].style.setProperty('--test', 'yellow');
      //或
      window.document.getElementsByTagName('body')[0].style.setProperty('--test', 'yellow');
    }
  }