详解vue项目中如何引入全局sass/less变量、function、mixin


Posted in Javascript onJune 02, 2018

让我们考虑下场景:当使用rem/vw开发移动端的时候,你定义了一个px转rem的函数,或者是网站配色的全局变量等,然后到工程里为每个vue文件或者组件@import ‘publicfilename.scss',那得重复做这样的工作很多很多...次,万一这些公用文件目录路径变怎么办呢,哭都来不及,想想都觉得恐怖呀!

接下来拯救我们的神器就要登场了---sass-resources-loader,它可以省去重复性的引入,还支持less,postcss等,具体用法如下:

npm install -d sass-resource-loader

首先我们找到项目里build目录,在该目录下找到util.js

更新前util.js代码如下:

'use strict'
const path = require('path')
const config = require('../config')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const packageConfig = require('../package.json')
exports.assetsPath = function (_path) {
 const assetsSubDirectory = process.env.NODE_ENV === 'production'
  ? config.build.assetsSubDirectory
  : config.dev.assetsSubDirectory

 return path.posix.join(assetsSubDirectory, _path)
}

exports.cssLoaders = function (options) {
 options = options || {}

 const cssLoader = {
  loader: 'css-loader',
  options: {
   sourceMap: options.sourceMap
  }
 }

 // generate loader string to be used with extract text plugin
 function generateLoaders (loader, loaderOptions) {
  const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

  if (loader) {
   loaders.push({
    loader: loader + '-loader',
    options: Object.assign({}, loaderOptions, {
     sourceMap: options.sourceMap
    })
   })
  }

  // 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)
  }
 }

 // https://vue-loader.vuejs.org/en/configurations/extract-css.html
 return {
  css: generateLoaders(),
  postcss: generateLoaders(),
  less: generateLoaders('less'),
  sass: generateLoaders('sass', { indentedSyntax: true }),
  scss: generateLoaders('sass'),
  stylus: generateLoaders('stylus'),
  styl: generateLoaders('stylus')
 }
}

// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function (options) {
 const output = []
 const loaders = exports.cssLoaders(options)

 for (const extension in loaders) {
  const loader = loaders[extension]
  output.push({
   test: new RegExp('\\.' + extension + '$'),
   use: loader
  })
 }

 return output
}

exports.createNotifierCallback = () => {
 const notifier = require('node-notifier')

 return (severity, errors) => {
  if (severity !== 'error') return

  const error = errors[0]
  const filename = error.file && error.file.split('!').pop()

  notifier.notify({
   title: packageConfig.name,
   message: severity + ': ' + error.name,
   subtitle: filename || '',
   icon: path.join(__dirname, 'logo.png')
  })
 }
}

/**
 * 增加 hljs 的 classname
 */
exports.wrapCustomClass = function (render) {
 return function (...args) {
  return render(...args)
   .replace('<code class="', '<code class="hljs ')
   .replace('<code>', '<code class="hljs">')
 }
}
/**
 * Format HTML string
 */
exports.convertHtml = function (str) {
 return str.replace(/(&#x)(\w{4});/gi, $0 => String.fromCharCode(parseInt(encodeURIComponent($0).replace(/(%26%23x)(\w{4})(%3B)/g, '$2'), 16)))
}

看util.js文件,我们首先找到我需要修改目标在哪:

// https://vue-loader.vuejs.org/en/configurations/extract-css.html
 return {
  css: generateLoaders(),
  postcss: generateLoaders(),
  less: generateLoaders('less'),
  sass: generateLoaders('sass', { indentedSyntax: true }),
  scss: generateLoaders('sass'),
  stylus: generateLoaders('stylus'),
  styl: generateLoaders('stylus')
 }

我们那sass为例,用sass-resources-loader对其改造:

/**
  * sass Less 源文件
  * @param name classFile
  * @returns {string}
  */
 function resolveResouce(name) {
  return path.resolve(__dirname, '../static/' + name);
 }

 //导入全局sass mixin function等
 function generateSassResourceLoader(){
  var loaders = [
   cssLoader,
   //'postcss-loader',
   'sass-loader',
   {
    loader:'sass-resources-loader',
    options: {
     //需要一个全局路径
     resources: [resolveResouce('index.scss')]
    }
   }
  ]
  if(options.extract){
   return ExtractTextPlugin.extract({
    use:loaders,
    fallback: 'vue-style-loader'
   })
  }else{
   return ['vue-style-loader'].concat(loaders)
  }
 }

工具写好好了,接下来直接把上门return对象做些调整,代码如下

// https://vue-loader.vuejs.org/en/configurations/extract-css.html
 return {
  css: generateLoaders(),
  postcss: generateLoaders(),
  less: generateLoaders('less'),
  sass:generateSassResourceLoader(),
  scss:generateSassResourceLoader(),
  stylus: generateLoaders('stylus'),
  styl: generateLoaders('stylus')
 }

从代码中可以看出,我们把sass和scss的loader换成我们自己根据sass-resources-loader写的方法了,这样就实现了我们的目标。

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

Javascript 相关文章推荐
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
Feb 18 Javascript
最佳的addEvent事件绑定是怎样诞生的
Oct 24 Javascript
简介JavaScript中toTimeString()方法的使用
Jun 12 Javascript
Node.js编程中客户端Session的使用详解
Jun 23 Javascript
js代码实现随机颜色的小方块
Jul 30 Javascript
Angular2入门--架构总览
Mar 29 Javascript
详解vue-cli中配置sass
Jun 21 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
Jul 24 Javascript
解决JavaScript layui 下拉框不显示的问题
Aug 14 Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
May 07 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
Jul 22 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
Oct 01 Javascript
vue之将echart封装为组件
Jun 02 #Javascript
React学习笔记之高阶组件应用
Jun 02 #Javascript
浅谈node中的cluster集群
Jun 02 #Javascript
详解AngularJS 过滤器的使用
Jun 02 #Javascript
简化vuex的状态管理方案的方法
Jun 02 #Javascript
深入了解javascript 数组的sort方法
Jun 01 #Javascript
js 数组详细操作方法及解析合集
Jun 01 #Javascript
You might like
傻瓜化配置PHP环境――Appserv
2006/12/13 PHP
php5 apache 2.2 webservice 创建与配置(java)
2011/01/27 PHP
php设计模式之观察者模式的应用详解
2013/05/21 PHP
如何实现浏览器上的右键菜单
2006/07/10 Javascript
Jquery替换已存在于element上的event的方法
2010/03/09 Javascript
javascript与webservice的通信实现代码
2010/12/25 Javascript
js 处理数组重复元素示例代码
2013/12/27 Javascript
用JQuery实现全选与取消的两种简单方法
2014/02/22 Javascript
js和jquery中循环的退出和继续下一个循环
2014/09/03 Javascript
html+js+highcharts绘制圆饼图表的简单实例
2016/08/04 Javascript
jQuery实现多张图片上传预览(不经过后端处理)
2017/04/29 jQuery
js+html5实现侧滑页面效果
2017/07/15 Javascript
微信小程序之页面拦截器的示例代码
2017/09/07 Javascript
微信小程序使用navigateTo数据传递的实例
2017/09/26 Javascript
10个在JavaScript开发中常遇到的BUG
2017/12/18 Javascript
p5.js入门教程和基本形状绘制
2018/03/15 Javascript
微信小程序通过js实现瀑布流布局详解
2019/08/28 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
2019/10/30 Javascript
vue中使用vue-print.js实现多页打印
2020/03/05 Javascript
jQuery实现tab栏切换效果
2020/12/22 jQuery
mustache.js实现首页元件动态渲染的示例代码
2020/12/28 Javascript
[06:24]DOTA2 2015国际邀请赛中国区预选赛第二日TOP10
2015/05/27 DOTA
python 解压pkl文件的方法
2018/10/25 Python
python读取各种文件数据方法解析
2018/12/29 Python
Python爬取视频(其实是一篇福利)过程解析
2019/08/01 Python
django admin 根据choice字段选择的不同来显示不同的页面方式
2020/05/13 Python
golang/python实现归并排序实例代码
2020/08/30 Python
python实现跨年表白神器--你值得拥有
2021/01/04 Python
Joie官方网上商店:购买服装和女装配饰
2018/06/05 全球购物
init进程的作用
2012/04/12 面试题
介绍一下mysql的日期和时间函数
2013/03/28 面试题
体育课外活动总结
2014/07/08 职场文书
12.4法制宣传日标语
2014/10/08 职场文书
个人债务授权委托书
2014/10/17 职场文书
工作失误检讨书范文
2015/01/26 职场文书
2015秋季田径运动会广播稿
2015/08/19 职场文书