vue-cli 2.*中导入公共less文件的方法步骤


Posted in Javascript onNovember 22, 2018

在新版的Vue CLI 3中,如何导入公共less文件在文档里已经描述的很清楚了,但是在2.*的版本中,我没有查到相关的办法,网友的办法又相当复杂,于是我推荐给大家一个很简单的办法。

首先,会用到webpack中的资源预处理器Style Resources Loader,所以需要:

npm i style-resources-loader -D

然后在build/utils.js文件中可以找到CSS预处理器的实现方式:

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')
 }
}

简单的看下来就是需要哪种类型的样式就去加载对应的预处理器,因此只需要在加载less文件的情况下,多加一种Style Resources Loader预处理器就可以解决问题,所以只要加上如下代码,即可实现。

if (loader) {
  ...
 }
 if(loader == 'less'){
  loaders.push({
   loader: 'style-resources-loader',
   options: {
    patterns: path.resolve(__dirname, '../src/assets/config/*.less')
   }
  })
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE6不能修改NAME问题的解决方法
Sep 03 Javascript
jquery+json实现数据列表分页示例代码
Nov 15 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
Jun 16 Javascript
jquery操作select方法汇总
Feb 05 Javascript
jQuery验证元素是否为空的两种常用方法
Mar 17 Javascript
基于Jquery easyui 选中特定的tab
Nov 17 Javascript
JavaScript实现水平进度条拖拽效果
Jan 18 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
Jul 09 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
Oct 26 Javascript
利用three.js画一个3D立体的正方体示例代码
Nov 19 Javascript
如何重置vue打印变量的显示方式
Dec 06 Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
May 06 Javascript
vue全局使用axios的方法实例详解
Nov 22 #Javascript
vue中的ref和$refs的使用
Nov 22 #Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
Nov 22 #Javascript
原生JS实现手动轮播图效果实例代码
Nov 22 #Javascript
js实现按钮开关单机下拉菜单效果
Nov 22 #Javascript
vue+node实现图片上传及预览的示例方法
Nov 22 #Javascript
微信上传视频文件提示(推荐)
Nov 22 #Javascript
You might like
php中转义mysql语句的实现代码
2011/06/24 PHP
执行、获取远程代码返回:file_get_contents 超时处理的问题详解
2013/06/25 PHP
ioncube_loader_win_5.2.dll的错误解决方法
2015/01/04 PHP
PHP如何实现Unicode和Utf-8编码相互转换
2015/07/29 PHP
thinkPHP3.1验证码的简单实现方法
2016/04/22 PHP
php+mysql实现的二级联动菜单效果详解
2016/05/10 PHP
mysql alter table命令修改表结构实例详解
2016/09/24 PHP
Locate a File Using a File Open Dialog Box
2007/06/18 Javascript
InnerHtml和InnerText的区别分析
2009/03/13 Javascript
多浏览器兼容的获取元素和鼠标的位置的js代码
2009/12/15 Javascript
JavaScript 放大镜 移动镜片效果代码
2011/05/09 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
2015/03/14 Javascript
基于html5和nodejs相结合实现websocket即使通讯
2015/11/19 NodeJs
基于Echarts 3.19 制作常用的图形(非静态)
2016/05/19 Javascript
js生成随机数(指定范围)的实例代码
2016/07/10 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
2016/11/07 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
2019/10/09 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
2020/07/23 Javascript
Python实现微信公众平台自定义菜单实例
2015/03/20 Python
Python IDE PyCharm的基本快捷键和配置简介
2015/11/04 Python
Python+pandas计算数据相关系数的实例
2018/07/03 Python
浅析Python pandas模块输出每行中间省略号问题
2018/07/03 Python
python实现周期方波信号频谱图
2018/07/21 Python
Python学习笔记之Break和Continue用法分析
2019/08/14 Python
Python @property使用方法解析
2019/09/17 Python
线程安全及Python中的GIL原理分析
2019/10/29 Python
Java如何基于wsimport调用wcf接口
2020/06/17 Python
python3代码中实现加法重载的实例
2020/12/03 Python
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
2012/11/13 HTML / CSS
Zatchels官网:英国剑桥包品牌
2021/01/12 全球购物
生物化工专业个人自荐信
2013/09/26 职场文书
实验室标语
2014/06/21 职场文书
党员思想汇报材料
2014/12/19 职场文书
领导干部考核评语
2015/01/04 职场文书
2016年大学生暑期社会实践方案
2015/11/26 职场文书