vue cli3及4版本的全局引入scss

需要借助 sass-resources-loader工具

npm install sass-resources-loader

在src\styles\css目录中新建一个_variables.scss文件，并且声明一个变量

// Base color
$blue: #324157;
$light-blue: #3a71a8;
$red: #c03639;
$pink: #e65d6e;
$green: #00c6ae;
$tiffany: #4ab7bd;
$yellow: #f7ac49;
$panGreen: #30b08f;
$button-blue: #81d3f8;
$grey: #f2f9ff;
$flag-blue: #008fe0c4;

然后在项目的根目录下，新建vue.config.js文件，输入以下内容

module.exports = {
 pluginOptions: {
    "style-resources-loader": {
      preProcessor: "scss",
      patterns: [
        //加上自己的文件路径，不能使用别名
        path.resolve(__dirname, "src/styles/_variables.scss")
      ]
    }
  },
  }

接着在.vue文件中，就可以直接用color:$light-blue了

// APP.vue
<style lang="scss" scoped>
    .search{
        font-size: 12px;
        color: $main-color;
    }
</style>