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 相关文章推荐
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
Dec 06 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
Jan 13 Javascript
js实现多选项切换导航菜单的方法
Feb 06 Javascript
JS出现失效的情况总结
Jan 20 Javascript
jQuery排序插件tableSorter使用方法
Feb 10 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
Feb 23 Javascript
小发现之浅谈location.search与location.hash的问题
Jun 23 Javascript
ReactNative实现Toast的示例
Dec 31 Javascript
微信小程序学习笔记之本地数据缓存功能详解
Mar 29 Javascript
微信小程序如何实现全局重新加载
Jun 05 Javascript
js实现弹幕飞机效果
Aug 27 Javascript
jQuery实现增删改查
Dec 22 jQuery
详解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
一些PHP写的小东西
2006/12/06 PHP
ThinkPHP的模版中调用session数据的方法
2014/07/01 PHP
PHP中数据库单例模式的实现代码分享
2014/08/21 PHP
orm获取关联表里的属性值
2016/04/17 PHP
奇妙的js
2007/09/24 Javascript
JS处理VBArray的函数使用说明
2008/05/11 Javascript
通过js简单实现将一个文本内容转译成加密文本
2013/10/22 Javascript
JavaScript实现的简单烟花特效代码
2015/10/20 Javascript
js实现C#的StringBuilder效果完整实例
2015/12/22 Javascript
全面解析Javascript无限添加QQ好友原理
2016/06/15 Javascript
新闻上下滚动jquery 超简洁(必看篇)
2017/01/21 Javascript
js 数组详细操作方法及解析合集
2018/06/01 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
2019/05/29 Javascript
vue实现在线翻译功能
2019/09/27 Javascript
Node.js API详解之 net模块实例分析
2020/05/18 Javascript
小程序选项卡以及swiper套用(跨页面)
2020/06/19 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
2020/09/02 Javascript
利用Python获取操作系统信息实例
2016/09/02 Python
利用Python在一个文件的头部插入数据的实例
2018/05/02 Python
Django微信小程序后台开发教程的实现
2020/06/03 Python
Python flask路由间传递变量实例详解
2020/06/03 Python
python绘图pyecharts+pandas的使用详解
2020/12/13 Python
html5通过canvas实现刮刮卡效果示例分享
2014/01/27 HTML / CSS
html5+css如何实现中间大两头小的轮播效果
2018/12/06 HTML / CSS
马克华菲官方商城:Mark Fairwhale
2016/09/04 全球购物
Superdry极度乾燥官网:日本街头风格,纯英国制造品牌
2016/10/31 全球购物
英国知名化妆品网站:Revolution Beauty(原TAM Beauty)
2018/02/28 全球购物
业务员岗位职责
2013/11/16 职场文书
关于打架的检讨书
2014/01/17 职场文书
教师档案管理制度
2014/01/23 职场文书
远程培训的心得体会
2014/09/01 职场文书
检查机关领导群众路线教育实践活动个人整改措施
2014/10/28 职场文书
黄山导游词
2015/01/31 职场文书
部门经理迟到检讨书
2015/02/16 职场文书
收入证明申请书
2015/06/12 职场文书
nginx location 带斜杠【 / 】与不带的区别
2022/04/13 Servers