技術標籤：CssVueuni-app

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>