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高级程序设计 客户端存储学习笔记
Sep 10 Javascript
可简单避免的三个JS发布错误的详细介绍
Aug 02 Javascript
使用js判断当前时区TimeZone是否是夏令时
Feb 23 Javascript
纯Javascript实现ping功能的方法
Mar 20 Javascript
使用CamanJS在Web页面上处理图像的技巧
Aug 18 Javascript
JavaScript的变量声明提升问题浅析(Hoisting)
Nov 30 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
Jan 18 Javascript
Bootstrap导航中表单简单实现代码
Mar 06 Javascript
vue+webpack 打包文件 404 页面空白的解决方法
Feb 28 Javascript
解决vue axios的封装 请求状态的错误提示问题
Sep 25 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
May 10 Javascript
javascript实现前端成语点击验证优化
Jun 24 Javascript
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
Zend Framework+smarty用法实例详解
2016/03/19 PHP
orm获取关联表里的属性值
2016/04/17 PHP
PHP入门教程之日期与时间操作技巧总结(格式化,验证,获取,转换,计算等)
2016/09/11 PHP
js change,propertychange,input事件小议
2011/12/20 Javascript
关于锚点跳转及jQuery下相关操作与插件
2012/10/01 Javascript
DOM中事件处理概览与原理的全面解析
2016/08/16 Javascript
js控制台输出的方法(详解)
2016/11/26 Javascript
Javascript之面向对象--接口
2016/12/02 Javascript
JS实现购物车特效
2017/02/02 Javascript
原生JS仿QQ阅读点击展开、收起效果
2017/03/08 Javascript
微信小程序 页面跳转及数据传递详解
2017/03/14 Javascript
vue实现全选和反选功能
2017/08/31 Javascript
ionic使用angularjs表单验证(模板验证)
2018/12/12 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
2019/01/07 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
2019/09/10 Javascript
iview form清除校验状态的实现
2019/09/19 Javascript
vue中使用elementUI组件手动上传图片功能
2019/12/13 Javascript
vue将文件/图片批量打包下载zip的教程
2020/10/21 Javascript
vue 动态生成拓扑图的示例
2021/01/03 Vue.js
[02:32]DOTA2亚洲邀请赛 VG战队巡礼
2015/02/03 DOTA
浅谈Python类的__getitem__和__setitem__特殊方法
2016/12/25 Python
Python 机器学习库 NumPy入门教程
2018/04/19 Python
python实现决策树分类(2)
2018/08/30 Python
Django 多环境配置详解
2019/05/14 Python
Python 获取项目根路径的代码
2019/09/27 Python
详解python tkinter模块安装过程
2020/01/06 Python
python序列类型种类详解
2020/02/26 Python
关于matplotlib-legend 位置属性 loc 使用说明
2020/05/16 Python
恐龙的灭绝教学反思
2014/02/12 职场文书
2014年社会实践活动总结范文
2014/04/29 职场文书
领导干部整治奢华浪费之风思想汇报
2014/10/07 职场文书
学校施工安全责任书
2015/01/29 职场文书
趣味运动会赞词
2015/07/22 职场文书
关于远足的感想
2015/08/10 职场文书
2015年大学组织委员个人工作总结
2015/10/23 职场文书
python四个坐标点对图片区域最小外接矩形进行裁剪
2021/06/04 Python