详解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 相关文章推荐
js将字符串转成正则表达式的实现方法
Nov 13 Javascript
Javascript解析URL方法详解
Dec 05 Javascript
炫酷的js手风琴效果
Oct 13 Javascript
jquery实现拖动效果(代码分享)
Jan 25 Javascript
JavaScript Date 知识浅析
Jan 29 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
Mar 15 Javascript
微信小程序获取循环元素id以及wx.login登录操作
Aug 17 Javascript
微信小程序button组件使用详解
Jan 31 Javascript
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
微信小程序中显示倒计时代码实例
May 09 Javascript
用js实现放大镜效果
Oct 28 Javascript
vue实现移动端div拖动效果
Mar 03 Vue.js
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
Opcache导致php-fpm崩溃nginx返回502
2015/03/02 PHP
php出租房数据管理及搜索页面
2017/05/23 PHP
Laravel框架实现简单的学生信息管理平台案例
2019/05/07 PHP
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
2007/04/27 Javascript
Jquery下attr和removeAttr的使用方法
2010/12/28 Javascript
javascript控制在光标位置插入文字适合表情的插入
2014/06/09 Javascript
jQuery使用hide方法隐藏元素自身用法实例
2015/03/30 Javascript
简述Jquery与DOM对象
2015/07/10 Javascript
SWFObject基本用法实例分析
2015/07/20 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
2016/11/24 Javascript
AngularJS实现路由实例
2017/02/12 Javascript
jQuery表单验证之密码确认
2017/05/22 jQuery
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
2019/01/15 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
2019/04/23 Javascript
在vue+element ui框架里实现lodash的debounce防抖
2019/11/13 Javascript
js实现百度登录窗口拖拽效果
2020/03/19 Javascript
解决Vue中使用keepAlive不缓存问题
2020/08/04 Javascript
python线程锁(thread)学习示例
2013/12/04 Python
Python的Bottle框架中实现最基本的get和post的方法的教程
2015/04/30 Python
简单介绍Python中的decode()方法的使用
2015/05/18 Python
使用Python进行二进制文件读写的简单方法(推荐)
2016/09/12 Python
Python实现希尔排序算法的原理与用法实例分析
2017/11/23 Python
python实现大转盘抽奖效果
2019/01/22 Python
Python序列类型的打包和解包实例
2019/12/21 Python
Python析构函数__del__定义原理解析
2020/11/20 Python
美国在线家居装饰店:Belle&June
2018/10/24 全球购物
德国受欢迎的旅游和休闲网站:lastminute.de
2019/09/23 全球购物
简单说说tomcat的配置
2013/05/28 面试题
室内设计专业个人的自我评价
2013/12/18 职场文书
副厂长岗位职责
2014/02/02 职场文书
毕业生欢送会主持词
2014/03/31 职场文书
领导班子四风对照检查材料
2014/09/23 职场文书
2015年班干部工作总结
2015/04/29 职场文书
《狮子和鹿》教学反思
2016/02/16 职场文书
七年级作文之关于奶奶
2019/10/29 职场文书
Spring-cloud Config Server的3种配置方式
2021/09/25 Java/Android