作者：kim 來自：kimshareclub微信公眾號

1、安裝

npm install sass-resources-loader -D

2、在build/utils.js裡新增如下配置

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    
    # 註釋原始配置
    // scss: generateLoaders('sass'), 
    
    # 新增一下程式碼
    +  scss: generateLoaders('sass').concat({
    +    loader: 'sass-resources-loader',
    +    options: {
    +         resources: path.resolve(__dirname, '../src/assets/css/element-variables.scss')
    +         // 需要全域性引入的檔案
    +    }
    +  }),
    # 新增結束
    
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
}
 

3、在頁面上使用全域性變數：$–color-white

<style lang="scss" scoped>
    .sidebar{
        display: block;
        position: absolute;
        left: 0;
        top: 70px;
        bottom: 0px; 
        overflow-y: scroll;
        # 使用全域性變數
        background-color: $--color-white;
    }
</style>