sass支持设置全局样式变量，且变量可以计算

 

vue-cli2怎么设置全局变量网上已有很多方案，这里主要讲下vue-cli3下怎么做

 

1 准备存放全局样式变量的文件

 

_variable.scss，内容如下：

 

$theme-color: #3385ff;

 

2 配置loader

 

打开根目录下 vue.config.js

 

写入

 

module.exports = {

 

  // ...

 

  css: {

 

    loaderOptions: {

 

      sass: {

 

        data: ——

 

          @import "@/assets/styles/_variable.scss";

 

        ——

 

      }

 

    }

 

  }

 

}

 

3 使用全局变量

 

现在就可以在每个vue文件中直接使用全局变量了

 

<template></template>

 

<script></script>

 

<style lang="scss" scoped>

 

button{

 

color: $theme-color;

 

}

 

</style>