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

2023-12-13 02:49| 来源: 网络整理| 查看: 265

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”文件就可以了，如：

export default { name: 'app', mounted () { } } @import './assets/config.css';

【本文地址】

公司简介

联系我们