vue中使用scss变量

要在Vue中使用SCSS变量，需要先安装`sass-loader`和`node-sass`两个依赖包。然后，在Vue组件中导入SCSS文件，并在样式中使用SCSS变量即可。

首先，安装依赖包：

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

然后，在Vue组件中导入SCSS文件：

<template>
  <div class="example">
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
import './example.scss';

export default {
  data() {
    return {
      message: 'Hello World!',
    };
  },
};
</script>

接着，在SCSS文件中定义变量：

$primary-color: #007bff;

.example {
  h1 {
    color: $primary-color;
  }
}

最后，使用变量：

<template>
  <div class="example">
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
import './example.scss';

export default {
  data() {
    return {
      message: 'Hello World!',
    };
  },
};
</script>

<style lang="scss">
$primary-color: #007bff;

.example {
  h1 {
    color: $primary-color;
  }
}
</style>