如何在webpack构建的vue项目中全局引入定义有mixin函数和全局变量的sass文件

引言:
众所周知,使用sass书写样式是非常方便的。在写用sass写样式的时候,多个地方用到的同样的样式,如果一个个的写,那可能就太麻烦了,因此,我们经常会定义全局变量,或者mixin函数。但是在webpack构建的项目中,对于这些定义有mixin函数和全局变量的sass文件是无法直接在main.js文件直接通过import导入的。但是如果每个用到的组件都单独引入一次还是会太麻烦,因此我们就需要用到一个模块加载器 - sass-resources-loader 了。
使用步骤:
1,npm下载模块
npm install sass-resources-loader -d
2, 在webpack中进行配置
在build文件夹目录下找到utils.js文件,在该文件中找到exports.cssLoaders方法,在该方法中加入以下代码:


image.png

然后,找到exports.cssLoaders方法return内容,将其替换为:


image.png

3,配置完成之后,重新npm run dev运行一下,就可以在main.js中全局引入sass文件了。
image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 8,226评论 7 35
  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 ...
    it筱竹阅读 11,231评论 0 21
  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 12,710评论 7 110
  • 目录第1章 webpack简介 11.1 webpack是什么? 11.2 官网地址 21.3 为什么使用 web...
    lemonzoey阅读 1,751评论 0 1
  • 2017.08.20 周日啦,提前预约了中国科技馆的票。 吃过早饭,早早就出发,看到了雾气罩罩的大钉子。 巨大的球...
    摹喵居士阅读 304评论 0 0