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 相关文章推荐
体验js中splice()的强大(插入、删除或替换数组的元素)
Jan 16 Javascript
js使用cookie记录用户名的方法
Nov 26 Javascript
javascript检测移动设备横竖屏
May 21 Javascript
全面解析node 表单的图片上传
Nov 21 Javascript
jQuery+ajax的资源回收处理机制分析
Jan 07 Javascript
JS实现的表头列头固定页面功能示例
Jan 10 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
Apr 17 Javascript
js实现图片上传预览原理分析
Jul 13 Javascript
axios实现文件上传并获取进度
Mar 25 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
Apr 11 Javascript
Element实现动态表格的示例代码
Aug 02 Javascript
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 Vue.js
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
中国的第一台收音机
2021/03/01 无线电
php设计模式  Command(命令模式)
2011/06/17 PHP
将php数组输出html表格的方法
2014/02/24 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
php获取微信基础接口凭证Access_token
2018/08/23 PHP
JavaScript 特殊字符
2007/04/05 Javascript
JAVASCRIPT下判断IE与FF的比较简单的方式
2008/10/17 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
2014/02/12 Javascript
jQuery实现手机号码输入提示功能实例
2015/04/30 Javascript
详解JavaScript中的every()方法
2015/06/08 Javascript
jQuery对JSON数据进行排序输出的方法
2015/06/24 Javascript
Bootstrap Search Suggest使用例子
2016/12/21 Javascript
bootstrap fileinput 插件使用项目总结(经验)
2017/02/22 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
2018/05/08 Javascript
vue请求数据的三种方式
2020/03/04 Javascript
vue2.x数组劫持原理的实现
2020/04/19 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
2020/09/18 Javascript
python中sets模块的用法实例
2014/09/30 Python
快速了解Python中的装饰器
2018/01/11 Python
浅析PEP572: 海象运算符
2019/10/15 Python
pytorch实现特殊的Module--Sqeuential三种写法
2020/01/15 Python
TensorFlow获取加载模型中的全部张量名称代码
2020/02/11 Python
利用python+ffmpeg合并B站视频及格式转换的实例代码
2020/11/24 Python
Python中Pyspider爬虫框架的基本使用详解
2021/01/27 Python
财务会计实习报告体会
2013/12/20 职场文书
征婚广告词
2014/03/17 职场文书
铣工实训报告
2014/11/05 职场文书
2014年统战工作总结
2014/12/09 职场文书
2015年暑假工作总结
2015/07/13 职场文书
2015年政治教研组工作总结
2015/07/22 职场文书
四十年同学聚会致辞
2015/07/28 职场文书
如何做好员工培训计划?
2019/07/09 职场文书
导游词之日月潭
2019/11/05 职场文书
JavaScript执行机制详细介绍
2021/12/06 Javascript
MySQL中rank() over、dense_rank() over、row_number() over用法介绍
2022/03/23 MySQL
MySQL视图概念以及相关应用
2022/04/19 MySQL