VueJS如何引入css或者less文件的一些坑


Posted in Javascript onApril 25, 2017

我们在做Vue+webpack的时,难免会引入各种公共css样式文件,那么我们改如何引入呢?引入时会有那些坑呢?

首先,引入公共样式时,我们在“main.js”里使用AMD的方式引入,即

require('./assets/css/main.less');

这时,我们会抛出一个错误,是因为我们没有写解析的依赖,webpack不知道怎么解析

VueJS如何引入css或者less文件的一些坑

这时,我们要填写上依赖,

require('!style!css!less!./assets/css/main.less');

在很多以前的博客里都是以上写法,这个是Vue 2.0刚开始的,现在使用会报错;下面是正确写法

require('!style-loader!css-loader!less-loader!./assets/css/main.less');

在以前配置到这里,就万事大吉了,也可以开始引入css文件了,然后现在到这里还会报错

VueJS如何引入css或者less文件的一些坑

当出现以上错误时,说明你的项目里缺少依赖;

npm install style-loader --save

这时你就可以引入css文件了;

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

Javascript 相关文章推荐
JQuery 获取和设置Select选项的代码
Feb 07 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
Apr 08 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
Sep 03 Javascript
jQuery 插件开发指南
Nov 14 Javascript
js显示当前日期时间和星期几
Oct 22 Javascript
Bootstrap组件(一)之菜单
May 11 Javascript
JS获取IMG图片高宽的简单实例
May 17 Javascript
Validform表单验证总结篇
Oct 31 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
Nov 21 Javascript
微信小程序使用Socket的实例
Sep 19 Javascript
vue实现简单的日历效果
Sep 24 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
Nov 02 Javascript
详解Angular 4.x 动态创建组件
Apr 25 #Javascript
Angular 4.x中表单Reactive Forms详解
Apr 25 #Javascript
Angular 4.x 动态创建表单实例
Apr 25 #Javascript
AngularJS动态菜单操作指令
Apr 25 #Javascript
Angular.js 4.x中表单Template-Driven Forms详解
Apr 25 #Javascript
详解JS中的attribute属性
Apr 25 #Javascript
node.js中debug模块的简单介绍与使用
Apr 25 #Javascript
You might like
基于文本的留言簿
2006/10/09 PHP
php中如何使对象可以像数组一样进行foreach循环
2013/08/09 PHP
关于URL中的特殊符号使用介绍
2011/11/03 Javascript
js中onload与onunload的使用示例
2013/08/25 Javascript
用unescape反编码得出汉字示例
2014/04/24 Javascript
jQuery与getJson结合的用法实例
2015/08/07 Javascript
js倒计时抢购实例
2015/12/20 Javascript
Bootstrap每天必学之导航组件
2016/04/25 Javascript
浅谈Sublime Text 3运行JavaScript控制台
2016/06/06 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
2016/12/18 Javascript
JavaScript中for循环的几种写法与效率总结
2017/02/03 Javascript
bing Map 在vue项目中的使用详解
2018/04/09 Javascript
vue-cli脚手架build目录下utils.js工具配置文件详解
2018/09/14 Javascript
Element Alert警告的具体使用方法
2020/07/27 Javascript
仅利用30行Python代码来展示X算法
2015/04/01 Python
在Ubuntu系统下安装使用Python的GUI工具wxPython
2016/02/18 Python
Python+selenium实现截图图片并保存截取的图片
2018/01/05 Python
查看TensorFlow checkpoint文件中的变量名和对应值方法
2018/06/14 Python
python中的字符串内部换行方法
2018/07/19 Python
利用pandas合并多个excel的方法示例
2019/10/10 Python
基于python3监控服务器状态进行邮件报警
2019/10/19 Python
Python values()与itervalues()的用法详解
2019/11/27 Python
使用sklearn对多分类的每个类别进行指标评价操作
2020/06/11 Python
Python 爬虫性能相关总结
2020/08/03 Python
Python自动化办公Excel模块openpyxl原理及用法解析
2020/11/05 Python
一款纯css3实现的鼠标经过按钮特效教程
2014/11/09 HTML / CSS
自定义html标记替换html5新增元素
2008/10/17 HTML / CSS
加拿大在线隐形眼镜专家:PerfectLens.ca
2016/11/19 全球购物
沙龙级头发造型工具:FOXYBAE
2018/07/01 全球购物
婴儿地球:Baby Earth
2018/12/25 全球购物
Proenza Schouler官方网站:纽约女装和配饰品牌
2019/01/03 全球购物
农村改厕实施方案
2014/03/22 职场文书
学雷锋月活动总结
2014/04/25 职场文书
学雷锋活动倡议书
2014/08/30 职场文书
街道务虚会发言材料
2014/10/20 职场文书
python​格式化字符串
2022/04/20 Python