详解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 相关文章推荐
jquery json 实例代码
Dec 02 Javascript
node.js中的fs.unlinkSync方法使用说明
Dec 15 Javascript
Angular用来控制元素的展示与否的原生指令介绍
Jan 07 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
May 11 Javascript
Jquery数字上下滚动动态切换插件
Aug 08 Javascript
原生JavaScript实现瀑布流布局
Jun 28 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
May 10 Javascript
简单的JS控制button颜色随点击更改的实现方法
Apr 17 Javascript
完美解决axios在ie下的兼容性问题
Mar 05 Javascript
详解Angular如何正确的操作DOM
Jul 06 Javascript
mpvue中使用flyjs全局拦截的实现代码
Sep 13 Javascript
vue工程全局设置ajax的等待动效的方法
Feb 22 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
4月1日重磅发布!《星际争霸II》6.0.0版本更新
2020/04/09 星际争霸
PHP flush()与ob_flush()的区别详解
2013/06/03 PHP
smarty内部日期函数html_select_date()用法实例分析
2015/07/08 PHP
PHP数学运算与数据处理实例分析
2016/04/01 PHP
PHP中localeconv()函数的用法
2019/03/26 PHP
laravel利用中间件做防非法登录和权限控制示例
2019/10/21 PHP
laravel 框架实现无限级分类的方法示例
2019/10/31 PHP
JavaScript使用prototype定义对象类型
2007/02/07 Javascript
toString()一个会自动调用的方法
2010/02/08 Javascript
jQuery在vs2008及js文件中的无智能提示的解决方法
2010/12/30 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
2011/04/16 Javascript
ScrollDown的基本操作示例
2013/06/09 Javascript
ExtJS4中使用mixins实现多继承示例
2013/12/03 Javascript
Javascript Ajax异步读取RSS文档具体实现
2013/12/12 Javascript
jquery 淡入淡出效果的简单实现
2014/02/07 Javascript
解析微信JS-SDK配置授权,实现分享接口
2016/12/09 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
2018/07/06 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
2018/08/07 Javascript
对类Vue的MVVM前端库的实现代码
2018/09/07 Javascript
JavaScript数组方法的错误使用例子
2018/09/13 Javascript
node中实现删除目录的几种方法
2019/06/24 Javascript
layui 中select下拉change事件失效的解决方法
2019/09/20 Javascript
python简单分割文件的方法
2015/07/30 Python
Python贪吃蛇游戏编写代码
2020/10/26 Python
浅析python的优势和不足之处
2018/11/20 Python
canvas生成带二维码海报的踩坑记录
2019/09/11 HTML / CSS
.net工程师笔试题
2012/06/09 面试题
带薪年假请假条
2014/02/04 职场文书
业务员简历自我评价
2014/03/06 职场文书
专业见习报告范文
2014/11/03 职场文书
2014年审计人员工作总结
2014/12/19 职场文书
搞笑婚前保证书
2015/02/28 职场文书
新闻通讯稿模板
2015/07/22 职场文书
2016年幼儿园教师师德承诺书
2016/03/25 职场文书
浅谈MySQL函数
2021/10/05 MySQL
使用vuex-persistedstate本地存储vuex
2022/04/29 Vue.js