如何在Vue中全局引入bass.scss？

作者：kim
来自：kimshareclub微信公众号

1、安装sass资源加载器

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>