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>

Logo

前往低代码交流专区

更多推荐