详解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单向链表的具体实现实例
Jun 21 Javascript
浏览器的JavaScript引擎的识别方法
Oct 20 Javascript
JSON+HTML实现国家省市联动选择效果
May 18 Javascript
jQuery.Validate表单验证插件的使用示例详解
Jan 04 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
Jul 19 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
Nov 06 Javascript
微信小程序表单验证功能完整实例
Dec 01 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
在vue中使用公共过滤器filter的方法
Jun 26 Javascript
vue+canvas实现拼图小游戏
Sep 18 Javascript
js实现石头剪刀布游戏
Oct 11 Javascript
ES6中的Javascript解构的实现
Oct 30 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进阶学习之依赖注入与Ioc容器详解
2019/06/19 PHP
Javascript实例教程(19) 使用HoTMetal(5)
2006/12/23 Javascript
js 数组克隆方法 小结
2010/03/20 Javascript
Javascript操作cookie的函数代码
2012/10/03 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
2013/09/12 Javascript
fmt:formatDate的输出格式详解
2014/01/09 Javascript
jqGrid读取选择的多行的某个属性代码
2014/05/18 Javascript
jquery uploadify 在FF下无效的解决办法
2014/09/26 Javascript
javascript实现微信分享
2014/12/23 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
2015/11/17 Javascript
AngularJS入门教程之多视图切换用法示例
2016/11/02 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
2016/12/14 Javascript
javascript设计模式之中介者模式学习笔记
2017/02/15 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
2017/06/15 Javascript
使用express+multer实现node中的图片上传功能
2018/02/02 Javascript
Vue实现点击时间获取时间段查询功能
2020/08/21 Javascript
详解微信小程序的 request 封装示例
2018/08/21 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
2019/09/26 Javascript
详解Nuxt内导航栏的两种实现方式
2020/04/16 Javascript
vue-cli3配置favicon.ico和title的流程
2020/10/27 Javascript
Python利用matplotlib生成图片背景及图例透明的效果
2017/04/27 Python
Python3.6中Twisted模块安装的问题与解决
2019/04/15 Python
详解Django将秒转换为xx天xx时xx分
2019/09/27 Python
设置jupyter中DataFrame的显示限制方式
2020/04/12 Python
python打包多类型文件的操作方法
2020/09/21 Python
Python爬取网站图片并保存的实现示例
2021/02/26 Python
阿迪达斯印度官方商城:adidas India
2017/03/26 全球购物
欧洲顶级体育电子商务网站:SportsShoes.com
2018/03/27 全球购物
乌克兰在线药房:Аптека24
2019/10/30 全球购物
岗位职责说明书
2014/05/07 职场文书
红色旅游心得体会
2014/09/03 职场文书
党的群众路线教育实践活动个人对照检查材料(企业)
2014/11/05 职场文书
2015年安全工作总结范文
2015/04/02 职场文书
超级详细实用的pycharm常用快捷键
2021/05/12 Python
Python 恐龙跑跑小游戏实现流程
2022/02/15 Python
使用CSS连接数据库的方式
2022/02/28 HTML / CSS