美文网首页
如何在Vue中全局引入bass.scss?

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

作者: 前端进阶体验 | 来源:发表于2018-11-12 21:25 被阅读0次

作者: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>

相关文章

网友评论

      本文标题:如何在Vue中全局引入bass.scss?

      本文链接:https://www.haomeiwen.com/subject/xdrhfqtx.html