详解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 相关文章推荐
XML+XSL 与 HTML 两种方案的结合
Apr 22 Javascript
解决jquery1.9不支持browser对象的问题
Nov 13 Javascript
jquery验证邮箱格式并显示提交按钮
Nov 07 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
Jul 04 Javascript
基于BootstrapValidator的Form表单验证(24)
Dec 12 Javascript
初识 Vue.js 中的 *.Vue文件
Nov 22 Javascript
用vuex写了一个购物车H5页面的示例代码
Dec 04 Javascript
JS字符串与二进制的相互转化实例代码详解
Jun 28 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
Jul 21 Javascript
js实现飞机大战小游戏
Aug 26 Javascript
vue 子组件和父组件传值的示例
Sep 11 Javascript
js重写alert事件(避免alert弹框标题出现网址)
Dec 04 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购物网站支付paypal使用方法
2010/11/28 PHP
PHP仿盗链代码
2012/06/03 PHP
php截取字符串函数substr,iconv_substr,mb_substr示例以及优劣分析
2014/06/10 PHP
PHP实现把文本中的URL转换为链接的auolink()函数分享
2014/07/29 PHP
ThinkPHP后台首页index使用frameset时的注意事项分析
2014/08/22 PHP
PHP开启opcache提升代码性能
2015/04/26 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
PHP抽象类基本用法示例
2018/12/28 PHP
js实现图片在未加载完成前显示加载中字样
2014/09/03 Javascript
node.js中的fs.exists方法使用说明
2014/12/17 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
2015/06/09 Javascript
javascript运算符语法全面概述
2016/07/14 Javascript
jQuery动态修改字体大小的方法【测试可用】
2016/09/09 Javascript
基于JavaScript实现本地图片预览
2017/02/08 Javascript
Vue.js弹出模态框组件开发的示例代码
2017/07/26 Javascript
form表单序列化详解(推荐)
2017/08/15 Javascript
js与jquery获取input输入框中的值实例讲解
2020/02/27 jQuery
nuxt 实现在其它js文件中使用store的方式
2020/11/05 Javascript
Vue开发中常见的套路和技巧总结
2020/11/24 Vue.js
python实现的一个p2p文件传输实例
2014/06/04 Python
浅析python中的分片与截断序列
2016/08/09 Python
Python对List中的元素排序的方法
2018/04/01 Python
Python画柱状统计图操作示例【基于matplotlib库】
2018/07/04 Python
浅析python3中的os.path.dirname(__file__)的使用
2018/08/30 Python
Python3.4 splinter(模拟填写表单)使用方法
2018/10/13 Python
Python OpenCV读取png图像转成jpg图像存储的方法
2018/10/28 Python
python 随机森林算法及其优化详解
2019/07/11 Python
python批量图片处理简单示例
2019/08/06 Python
python except异常处理之后不退出,解决异常继续执行的实现
2020/04/25 Python
在tensorflow以及keras安装目录查询操作(windows下)
2020/06/19 Python
Sneaker Studio捷克:购买运动鞋
2018/07/08 全球购物
英国最好的包装供应商:Priory Direct
2019/12/17 全球购物
印度在线购买电子产品网站:Croma
2020/01/02 全球购物
工作失误检讨书(经典集锦版)
2014/10/17 职场文书
公司借条范本
2015/05/25 职场文书
2016年教师师德师风承诺书
2016/03/25 职场文书