详解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 相关文章推荐
用 Javascript 验证表单(form)中的单选(radio)值
Sep 08 Javascript
使用js+jquery实现无限极联动
May 23 Javascript
jQuery Validate初步体验(一)
Dec 12 Javascript
JavaScript正则表达式匹配 div  style标签
Mar 15 Javascript
js和C# 时间日期格式转换的简单实例
May 28 Javascript
jQuery如何获取动态添加的元素
Jun 24 Javascript
jQuery基础_入门必看知识点
Jul 04 Javascript
dul无法加载bootstrap实现unload table/user恢复
Sep 29 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
Feb 21 Javascript
轻松学习Javascript闭包
Mar 01 Javascript
angular写一个列表的选择全选交互组件的示例
Jan 22 Javascript
JavaScript图片处理与合成总结
Mar 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采集类snoopy详细介绍(snoopy使用教程)
2014/06/19 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
jquery+json实现的搜索加分页效果
2010/03/31 Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
2012/05/30 Javascript
JavaScript对象学习经验整理
2013/10/12 Javascript
jQuery实现设置、移除文本框默认值功能
2015/01/13 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
2016/01/04 Javascript
jQuery实现动态控制页面元素的方法分析
2017/12/20 jQuery
react+redux仿微信聊天界面
2019/06/21 Javascript
jQuery实现图片下载代码
2019/07/18 jQuery
JavaScript arguments.callee作用及替换方案详解
2020/09/02 Javascript
jQuery实现朋友圈查看图片
2020/09/11 jQuery
pandas全表查询定位某个值所在行列的方法
2018/04/12 Python
Python爬虫包BeautifulSoup学习实例(五)
2018/06/17 Python
Python使用pymysql从MySQL数据库中读出数据的方法
2018/07/25 Python
tensorflow 中对数组元素的操作方法
2018/07/27 Python
在python中使用pymysql往mysql数据库中插入(insert)数据实例
2020/03/02 Python
python实现录屏功能(亲测好用)
2020/03/02 Python
HTML5 MiranaVideo播放器 (代码开源)
2010/06/11 HTML / CSS
澳大利亚宠物商店:Petbarn
2017/11/18 全球购物
澳大利亚在线奢侈品时尚零售平台:Azura Runway
2021/01/13 全球购物
学习两会精神心得范文
2014/03/17 职场文书
求职自荐信的格式
2014/04/07 职场文书
小学家长评语大全
2014/04/16 职场文书
群众路线四风问题整改措施
2014/09/27 职场文书
公务员年度个人总结
2015/02/12 职场文书
2015年小学远程教育工作总结
2015/07/28 职场文书
《圆的周长》教学反思
2016/02/17 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
中国式结婚:司仪主持词(范文)
2019/07/25 职场文书
利用python做表格数据处理
2021/04/13 Python
Python Django ORM连表正反操作技巧
2021/06/13 Python
MySQL系列之五 视图、存储函数、存储过程、触发器
2021/07/02 MySQL
golang fmt格式“占位符”的实例用法详解
2021/07/04 Golang
Redis读写分离搭建的完整步骤
2021/09/14 Redis
分享很少见很有用的SQL功能CORRESPONDING
2022/08/05 MySQL