vue 设置css通用的颜色变量（主题色）

1.首先在目录“src/assets”下新建两个文件：“base.css”（基本样式）和“config.css”（颜色变量存放位置，方便随时修改主题色）。

2.config.css文件中，定义变量如：

/*主题色*/
$themeColor:#45b795;
$borderColor: #EEE;
// 背景色
$bgColor:#FAFAFAFA;
// 按钮
$btn-red:#ef5728;

3.base.css（基本样式），引入如下：

@import "./config.css";
html,body{width:100%;height:100%;}
body {font-size:.3rem;background-color: $bgColor;}
a{text-decoration: none;}
#app {-webkit-font-smoothing: antialiased;}
.box{display: flex;position:relative;}
.box-f1{flex: 1;}
.box-ac{align-items: center}
.box-jc{justify-content: center}
.box-ver{flex-direction: column}
.w-p100{width:100%;}
.h-p100{height:100%}
.hide{display: none !important;}

核心代码：“background:$bgColor;”。

4.最后只需要在app.vue中引入一次“base.css”文件就可以了，如：

<template>
  <div id="app">
    <router-view class="router-view"></router-view>
  </div>
</template>

<script>
export default {
  name: 'app',
  mounted () {
  }
}
</script>

<style lang="scss">
@import './assets/config.css';
</style>