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 相关文章推荐
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
Jul 06 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
Apr 02 Javascript
js脚本编写简单刷票投票系统
Jun 27 Javascript
vue.js国际化 vue-i18n插件的使用详解
Jul 07 Javascript
vue 过滤器filter实例详解
Mar 14 Javascript
JS温故而知新之变量提升和时间死区
Jan 27 Javascript
vue实现固定位置显示功能
May 30 Javascript
新手快速入门微信小程序组件库 iView Weapp
Jun 24 Javascript
layui--select使用以及下拉框实现键盘选择的例子
Sep 24 Javascript
Vue项目环境搭建详细总结
Sep 26 Javascript
Windows上node.js的多版本管理工具用法实例分析
Nov 06 Javascript
小程序如何定位所在城市及发起周边搜索
Feb 11 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
mysq GBKl乱码
2006/11/28 PHP
PHP中file_get_contents函数抓取https地址出错的解决方法(两种方法)
2015/09/22 PHP
php 生成Tab键或逗号分隔的CSV
2016/09/24 PHP
js中if语句的几种优化代码写法
2011/03/12 Javascript
JS获得URL超链接的参数值实例代码
2013/06/21 Javascript
jQuery 三击事件实现代码
2013/09/11 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
2014/09/10 Javascript
javascript实现博客园页面右下角返回顶部按钮
2015/02/22 Javascript
javascript省市区三级联动下拉框菜单实例演示
2015/11/29 Javascript
AngularJS之依赖注入模拟实现
2016/08/19 Javascript
Ajax与服务器(JSON)通信实例代码
2016/11/05 Javascript
jQuery zTree树插件简单使用教程
2017/01/10 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
2017/05/10 Javascript
node.js学习之事件模块Events的使用示例
2017/09/28 Javascript
JS 实现百度搜索功能
2018/02/01 Javascript
Node.js 如何利用异步提升任务处理速度
2019/01/07 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
2019/06/05 Javascript
JavaScript如何借用构造函数继承
2019/11/06 Javascript
js前端对于大量数据的展示方式及处理方法
2020/12/02 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
2021/03/01 jQuery
[03:01]完美世界DOTA2联赛PWL S2 集锦第二期
2020/12/03 DOTA
Python闭包实现计数器的方法
2015/05/05 Python
使用requests库制作Python爬虫
2018/03/25 Python
django 在原有表格添加或删除字段的实例
2018/05/27 Python
python实现京东秒杀功能
2018/07/30 Python
Python中查看变量的类型内存地址所占字节的大小
2019/06/26 Python
Django单元测试工具test client使用详解
2019/08/02 Python
Python特殊属性property原理及使用方法解析
2020/10/09 Python
知识竞赛活动方案
2014/02/18 职场文书
2015试用期转正工作总结
2014/12/12 职场文书
民主生活会主持词
2015/07/01 职场文书
运动会开幕式通讯稿
2015/07/18 职场文书
婚礼上证婚人致辞
2015/07/28 职场文书
在js中修改html body的样式
2021/11/11 Javascript
IDEA 2022 Translation 未知错误 翻译文档失败
2022/04/24 Java/Android
使用compose函数优化代码提高可读性及扩展性
2022/06/16 Javascript