mpvue全局引入sass文件的方法步骤


Posted in Javascript onMarch 06, 2019

mpvue工程初始化的时候,使用sass的步骤

1.安装依赖:

npm install sass-loader node-sass --save-dev

2.在.vue文件中的style节点加上lang=”scss”,这样就可以愉快地使用sass进行开发了,无需再webpack.base.config.js中配置loader,webpack会自动识别.scss文件以及.vue中的scss代码。

在使用sass开发的时候,我们经常需要在各个页面使用统一的变量,还有一些方法,这种公共的资源如果不进行特殊处理的话,我们在每个页面都需要@import进来才能使用,当页面多起来的话,后期维护起来可能会有点吃力,这里介绍在mpvue下如何处理sass全局引入sass资源文件的步骤:

1.首先需要安装sass-resource-loader(我这里版本号是1.3.3):

npm install sass-resources-loader --save-dev

2.然后是找到工程根目录下的build/utils.js文件,我们新增一个loader对象

var sassResourceLoader = {
 loader: 'sass-resources-loader',
 options: {
  resources: [
  path.resolve(__dirname, '../src/assets/variables.scss'),
  ]
 }
 }

resources数组中,放的是需要引入的sass资源文件的路径。

声明对象的位置最好与其他loader同级

mpvue全局引入sass文件的方法步骤 

3. 然后改写一下generateLoaders函数

// generate loader string to be used with extract text plugin
 function generateLoaders(loader, loaderOptions, anotherLoader) {
 var loaders = [cssLoader, px2rpxLoader, postcssLoader]
 if (loader) {
  loaders.push({
  loader: loader + '-loader',
  options: Object.assign({}, loaderOptions, {
   sourceMap: options.sourceMap
  })
  })
 }
 if (!!anotherLoader) loaders.push(anotherLoader)

 // Extract CSS when that option is specified
 // (which is the case during production build)
 if (options.extract) {
  return ExtractTextPlugin.extract({
  use: loaders,
  fallback: 'vue-style-loader'
  })
 } else {
  return ['vue-style-loader'].concat(loaders)
 }
 }

主要是改了两个地方,就只是加了一个参数,加了一下判断:

mpvue全局引入sass文件的方法步骤

最后我们把自定义加上的loader加上去:

mpvue全局引入sass文件的方法步骤

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript getElementsByName()的用法说明
Jul 31 Javascript
用js判断是否为360浏览器的实现代码
Jan 15 Javascript
javascript实现根据3原色制作颜色选择器的方法
Jul 17 Javascript
浅谈js多维数组和hash数组定义和使用
Jul 27 Javascript
javascript数字验证的实例代码(推荐)
Aug 20 Javascript
用React实现一个完整的TodoList的示例代码
Oct 30 Javascript
Spring Boot/VUE中路由传递参数的实现代码
Mar 02 Javascript
微信小程序—setTimeOut定时器的问题及解决
Jul 26 Javascript
JavaScript计算正方形面积
Nov 26 Javascript
JavaScript运行机制实例分析
Apr 11 Javascript
用Angular实现一个扫雷的游戏示例
May 15 Javascript
jQuery 添加元素和删除元素的方法
Jul 15 jQuery
angular6根据environments配置文件更改开发所需要的环境的方法
Mar 06 #Javascript
vue项目前端埋点的实现
Mar 06 #Javascript
vue2.0结合Element-ui实战案例
Mar 06 #Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
Mar 06 #Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 #jQuery
微信小程序利用swiper+css实现购物车商品删除功能
Mar 06 #Javascript
JS实现数组深拷贝的方法分析
Mar 06 #Javascript
You might like
?生?D片??C字串
2006/12/06 PHP
使用 MySQL Date/Time 类型
2008/03/26 PHP
PHP项目开发中最常用的自定义函数整理
2010/12/02 PHP
两款万能的php分页类
2015/11/12 PHP
PHP实现websocket通信的方法示例
2018/08/28 PHP
JS控件autocomplete 0.11演示及下载 1月5日已更新
2007/01/09 Javascript
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
2007/03/10 Javascript
jQuery checkbox全选/取消全选实现代码
2009/11/14 Javascript
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
2010/03/15 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
2012/11/24 Javascript
JS简单编号生成器实现方法(附demo源码下载)
2016/04/05 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
2017/02/05 Javascript
详解vue事件对象、冒泡、阻止默认行为
2017/03/20 Javascript
微信小程序访问node.js接口服务器搭建教程
2017/04/25 Javascript
BACKBONE.JS 简单入门范例
2017/10/17 Javascript
vue.js中使用echarts实现数据动态刷新功能
2019/04/16 Javascript
如何在微信小程序里面退出小程序的方法
2019/04/28 Javascript
原生js canvas实现鼠标跟随效果
2020/08/02 Javascript
解决python3 urllib中urlopen报错的问题
2017/03/25 Python
python3实现跳一跳点击跳跃
2018/01/08 Python
Python3非对称加密算法RSA实例详解
2018/12/06 Python
Python微信操控itchat的方法
2019/05/31 Python
Python开发之身份证验证库id_validator验证身份证号合法性及根据身份证号返回住址年龄等信息
2020/03/20 Python
python3安装OCR识别库tesserocr过程图解
2020/04/02 Python
Sublime Text3最新激活注册码分享适用2020最新版 亲测可用
2020/11/12 Python
css3 伪类选择器快速复习小结
2019/09/10 HTML / CSS
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
英国川宁茶官方网站:Twinings茶
2019/05/21 全球购物
幼儿园运动会入场词
2014/02/10 职场文书
股权转让协议书
2014/04/12 职场文书
公司领导班子群众路线四风问题对照检查材料
2014/10/02 职场文书
离职感谢信
2015/01/21 职场文书
村党总支部公开承诺书2016
2016/03/25 职场文书
大学生,三分钟即兴演讲稿
2019/07/22 职场文书
教你利用python实现企业微信发送消息
2021/05/23 Python
详解jQuery的核心函数和事件处理
2022/02/18 jQuery