详解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对象的property和prototype是这样一种关系
Mar 24 Javascript
node.js中的url.parse方法使用说明
Dec 10 Javascript
javascript实现控制文字大中小显示
Apr 28 Javascript
js实现三张图(文)片一起切换的banner焦点图
Aug 25 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
Nov 23 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
Apr 17 Javascript
使用Sonarqube扫描Javascript代码的示例
Dec 26 Javascript
Angular8基础应用之表单及其验证
Aug 11 Javascript
jquery css实现流程进度条
Mar 26 jQuery
vue-以文件流-blob-的形式-下载-导出文件操作
Aug 07 Javascript
详解JavaScript 的执行机制
Sep 18 Javascript
javascript实现京东快递单号的查询效果
Nov 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
牡丹941资料
2021/03/01 无线电
一个简单计数器的源代码
2006/10/09 PHP
php递归列出所有文件和目录的代码
2008/09/10 PHP
将数组写入txt文件 var_export
2009/04/21 PHP
destoon实现资讯信息前面调用它所属分类的方法
2014/07/15 PHP
php实现的农历算法实例
2015/08/11 PHP
提高网站信任度的技巧
2008/10/17 Javascript
如何使用json在前后台进行数据传输实例介绍
2013/04/11 Javascript
js数组循环遍历数组内所有元素的方法
2014/01/18 Javascript
ActiveX控件与Javascript之间的交互示例
2014/06/04 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
2015/05/01 Javascript
JS实现的文字与图片定时切换效果代码
2015/10/06 Javascript
jQuery CSS3相结合实现时钟插件
2016/01/08 Javascript
学习JavaScript设计模式之单例模式
2016/01/19 Javascript
详细谈谈javascript的对象
2016/07/31 Javascript
全面了解函数声明与函数表达式、变量提升
2016/08/09 Javascript
js中Number数字数值运算后值不对的解决方法
2017/02/28 Javascript
jQuery Ajax前后端使用JSON进行交互示例
2017/03/17 Javascript
node.js调用Chrome浏览器打开链接地址的方法
2017/05/17 Javascript
vue弹窗组件使用方法
2018/04/28 Javascript
详解小程序设置缓存并且不覆盖原有数据
2019/04/15 Javascript
微信小程序实现消息框弹出动画
2020/04/18 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
2019/11/13 Javascript
javascript实现弹出层效果
2019/12/10 Javascript
在Python中使用poplib模块收取邮件的教程
2015/04/29 Python
Python RabbitMQ消息队列实现rpc
2018/05/30 Python
python如何使用socketserver模块实现并发聊天
2019/12/14 Python
python将unicode和str互相转化的实现
2020/05/11 Python
基于Tensorflow的MNIST手写数字识别分类
2020/06/17 Python
python利用 keyboard 库记录键盘事件
2020/10/16 Python
python之openpyxl模块的安装和基本用法(excel管理)
2021/02/03 Python
美国肌肉和力量商店:Muscle & Strength
2019/06/22 全球购物
土木工程专业大学毕业生求职信
2013/10/13 职场文书
四风对照检查材料思想汇报
2014/09/20 职场文书
学院党委班子四风问题自查报告及整改措施
2014/10/25 职场文书
LeetCode189轮转数组python示例
2022/08/05 Python