vue中使用css全局样式

在stylus中使用：

　　1.在src目录下的assets文件中的styles文件中创建一个varibles.styl文件

　　2.在varibles.styl文件中书写代码

$bgColor = #00bcd4

　　3.在vue组件的style中引入全局样式

@import ‘../../../assets/styles/varibles.styl‘

　　4.使用全局样式

.header{
      background : $bgColor
}

 原生css中使用：

　　1.在src目录下的assets文件中的styles文件中创建一个varibles.css文件

　　2.在varibles.css文件中书写代码

/*全局样式*/
:root{
    --bgColor : #00bcd4;
    --textColor : #333;
    --headerHeight : .86rem;
}

　　3.在vue组件的style中引入全局样式

/*引入css全局样式文件 对全局样式统一管理 提高代码的可维护性 与 js 不同的是css文件引入 @ 前面要加 ~,    _s 在 vue.config.js中定义为指定目录 */
    @import ‘~_s/varibles.css‘;

　　4.使用全局样式

.header{
    display: flex;
    line-height: var(--headerHeight);
    background: var(--bgColor);
    color: #fff;
}

原文地址：https://www.cnblogs.com/rickyctbur/p/11802600.html