详解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 相关文章推荐
修复ie8&amp;chrome下window的resize事件多次执行
Oct 20 Javascript
Javascript selection的兼容性写法介绍
Dec 20 Javascript
JavaScript中的变量作用域介绍
Dec 31 Javascript
JavaScript中用于生成随机数的Math.random()方法
Jun 15 Javascript
JS实现仿新浪黄色经典滑动门效果代码
Sep 27 Javascript
Kindeditor单独调用多图上传实例
Jul 31 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
Sep 20 Javascript
Vue render函数实战之实现tabs选项卡组件
Apr 22 Javascript
vue点击按钮动态创建与删除组件功能
Dec 29 Javascript
jQuery操作事件完整实例分析
Jan 10 jQuery
django简单的前后端分离的数据传输实例 axios
May 18 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
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中通过Ajax如何实现异步文件上传的代码实例
2011/05/07 PHP
PHP连接MSSQL2008/2005数据库(SQLSRV)配置实例
2014/10/22 PHP
php 浮点数比较方法详解
2017/05/05 PHP
网络图片延迟加载实现代码 超越jquery控件
2010/03/27 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
2013/12/26 Javascript
JavaScript运算符小结
2015/06/03 Javascript
基于Jquery和html5的7款个性化地图插件
2015/11/17 Javascript
js前端面试题及答案整理(一)
2016/08/26 Javascript
js实现背景图自适应窗口大小
2017/01/10 Javascript
Angular.JS中的指令引用template与指令当做属性详解
2017/03/30 Javascript
jQuery使用unlock.js插件实现滑动解锁
2017/04/04 jQuery
Vue插槽原理与用法详解
2019/03/05 Javascript
详解a标签添加onclick事件的几种方式
2019/03/29 Javascript
浅谈JS的原型和继承
2019/05/08 Javascript
在antd中setFieldsValue和defaultVal的用法
2020/10/29 Javascript
在nodejs中创建child process的方法
2021/01/26 NodeJs
Python类的用法实例浅析
2015/05/27 Python
Python3实现带附件的定时发送邮件功能
2020/12/22 Python
pandas中的DataFrame按指定顺序输出所有列的方法
2018/04/10 Python
python 脚本生成随机 字母 + 数字密码功能
2018/05/26 Python
python读取几个G的csv文件方法
2019/01/07 Python
python3 selenium自动化 下拉框定位的例子
2019/08/23 Python
Pytorch 实现权重初始化
2019/12/31 Python
python使用SQLAlchemy操作MySQL
2020/01/02 Python
浅谈Python中threading join和setDaemon用法及区别说明
2020/05/02 Python
Python如何进行时间处理
2020/08/06 Python
达拉斯牛仔官方商店:Dallas Cowboys Pro Shop
2018/02/10 全球购物
越南母婴用品购物网站:Kids Plaza
2020/04/09 全球购物
YII2 全局异常处理深入讲解
2021/03/24 PHP
历史学专业毕业生求职信
2013/09/27 职场文书
社区网格化管理实施方案
2014/03/21 职场文书
刑事附带民事起诉状
2015/05/19 职场文书
文化大革命观后感
2015/06/17 职场文书
创业计划书之家教中心
2019/09/25 职场文书
解决Maven项目中 Invalid bound statement 无效的绑定问题
2021/06/15 Java/Android
详解Oracle数据库中自带的所有表结构(sql代码)
2021/11/20 Oracle