全局CSS样式设置全局变量方法

创建一个scss文件：_variable.scss

$white: #fff;
$theme: #42bd56;
$red: #ff8c69;
$green: #00cd00;
$yellow: #ffb90f;
$gray-light: #eee;
$gray-deep: #777;
$black-light: #333;
$wrap-padding: 16px;

$theme-wy: #58c976;

在vue.config.js中增加配置 注意自己使用的sass-loader版本，additionalData 使用不同的属性

css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "~@/assets/scss/_variable.scss";`, //引入全局变量
      },
    },
  },

在vue文件中直接就能使用：

.title {
    margin: 40px 0;
    font-size: 50px;
    color: $theme;
  }