vue global use css styles

Use the stylus in:

　　1. Create a file in the styles file assets varibles.styl file in the src directory in

　　2. Writing code varibles.styl file

$bgColor = #00bcd4

　　3. introducing in the global style style vue assembly

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

　　4. Using Global Styles

.header{
      background : $bgColor    
}

 Use native css:

　　1. Create a file in the styles file assets varibles.css file in the src directory in

　　2. Writing code varibles.css file

/ * Global style * / 
: the root { 
    --bgColor : # 00bcd4 ; 
    --textColor : # 333 ; 
    --headerHeight : .86rem ; 
}

　　3. introducing in the global style style vue assembly

/ * The introduction of a global style css file to global style unified management to improve code maintainability and css files js difference is introduced before the @ to add ~, _s vue.config.js defined in the specified directory * / 
    @import '~ _s / varibles.css';

　　4. Using Global Styles

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