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

╰+攻爆jí腚メ 2021-09-16 23:36 360阅读 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>

发表评论取消回复

表情：

评论列表（有 0 条评论，360人围观）

还没有评论，来说两句吧...

相关阅读

相关如何在vue项目中引入svg图标

概述 svg，即Scalable Vector Graphics，可缩放矢量图形。相对于jpg，png图标，svg可以在任意分辨率下保证不会模糊，即便是网页缩放了。

╰半橙微兮°/ 2023年01月01日 07:56/ 0 赞/ 449 阅读

相关 vue-cli4中全局引入jquery

先安装依赖 npm install jquery 在src同级目录下新建一个`vue.config.js`文件 ![在这里插入图片描述][watermark_t

墨蓝/ 2023年01月01日 07:52/ 0 赞/ 90 阅读

相关 vue项目全局中引入scss

一、概述有一个scss文件，需要应用到每一个vue文件。如果每一个vue文件写重复代码，浪费精力。关于scss的安装，请参考链接：[https://www.cnbl

朴灿烈づ我的快乐病毒、/ 2022年10月15日 11:52/ 0 赞/ 211 阅读

相关如何在 vue 项目中引入 html 文件

这里以 vue-cli3 为例子，在pubilc目录下引入html就行了 ![a6e7327aa71a3e4defb62301f53c52ca.png][] 如果需要查看的

矫情吗；*/ 2022年08月29日 11:59/ 0 赞/ 291 阅读

相关 vue中全局引入sass文件记录

首先安装相关依赖： npm install node-sass --save-dev npm install sass-loader --save-dev

待我称王封你为后i/ 2022年05月20日 03:29/ 0 赞/ 196 阅读

相关在vue项目中引入vuex(全局状态管理器)

目录 Vuex是什么？ State Getter Mutation Action Module 项目结构 -------------------- V

灰太狼/ 2022年02月01日 01:13/ 0 赞/ 350 阅读

相关 Vue引入全局过滤器

创建单独的文件 ![在这里插入图片描述][20190516162536954.png] 加上时间过滤函数将formatDate 暴露export 出来

喜欢ヅ旅行/ 2022年01月31日 11:55/ 0 赞/ 303 阅读

相关在Vue中引入全局css(Global CSS in Vue)

为什么我们要使用全局样式？ 1. 有些时候我们可能使用--别人--封装好的组件库进行开发，如Element 但是又不想用他的属性，我们需要覆盖

矫情吗；*/ 2022年01月12日 09:55/ 0 赞/ 774 阅读

相关 vue引入全局过滤器，引入全局公共方法，引入全局变量

-------------------- 多读多写多记录，多学多练多思考。----------- Grapefruit.Banuit Gang(香柚帮) ---------

川长思鸟来/ 2021年11月16日 17:38/ 0 赞/ 640 阅读

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

作者：kim 来自：kimshareclub微信公众号 1、安装sass资源加载器 npm install sass-resources-loader -D

╰+攻爆jí腚メ/ 2021年09月16日 23:36/ 0 赞/ 361 阅读