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;
}