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实现检测浏览器及版本的脚本代码
Jan 22 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
May 10 Javascript
Javascript中With语句用法实例
May 14 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
Jan 14 Javascript
javascript实现右侧弹出“分享到”窗口效果
Feb 01 Javascript
基于Bootstrap仿淘宝分页控件实现代码
Nov 07 Javascript
jQuery命名空间与闭包用法示例
Jan 12 Javascript
JavaScript常用正则函数用法示例
Jan 23 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
May 30 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
Oct 08 Javascript
JavaScript函数Call、Apply原理实例解析
Feb 17 Javascript
原生JavaScript实现贪吃蛇游戏
Nov 04 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
不使用php api函数实现数组的交换排序示例
2014/04/13 PHP
ThinkPHP框架实现数据增删改
2017/05/07 PHP
php微信公众号开发之秒杀
2018/10/20 PHP
php微信公众号开发之校园图书馆
2018/10/20 PHP
破解Session cookie的方法
2006/07/28 Javascript
js获取class的所有元素
2013/03/28 Javascript
jQuery在ul中显示某个li索引号的方法
2015/03/17 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
2017/01/04 Javascript
js仿微信公众平台打标签功能
2017/04/08 Javascript
bootstrap的工具提示实例代码
2017/05/17 Javascript
JavaScript 中调用 Kotlin 方法实例详解
2017/06/09 Javascript
微信小程序三级联动地址选择器的实例代码
2017/07/12 Javascript
使用JavaScript实现点击循环切换图片效果
2017/09/03 Javascript
vue的一个分页组件的示例代码
2017/12/25 Javascript
微信小程序实现美团菜单
2018/06/06 Javascript
微信小程序实现运动步数排行功能(可删除)
2018/07/05 Javascript
小程序登录态管理的方法示例
2018/11/13 Javascript
通过实例解析vuejs如何实现调试代码
2020/07/16 Javascript
Python入门篇之面向对象
2014/10/20 Python
python解析html提取数据,并生成word文档实例解析
2018/01/22 Python
Python多线程原理与用法详解
2018/08/20 Python
解决Tensorflow占用GPU显存问题
2020/02/03 Python
Python 格式化输出_String Formatting_控制小数点位数的实例详解
2020/02/04 Python
Python xml、字典、json、类四种数据类型如何实现互相转换
2020/05/27 Python
Python实现定时监测网站运行状态的示例代码
2020/09/30 Python
日本PLST在线商店:日本时尚杂志刊载的人气服装
2016/12/10 全球购物
Watch Station官方网站:世界一流的手表和智能手表
2020/01/05 全球购物
医学专业个人求职自荐信格式
2013/09/23 职场文书
文明城市标语
2014/06/16 职场文书
新闻传播专业求职信
2014/07/22 职场文书
班级团队活动方案
2014/08/14 职场文书
2014年党风建设工作总结
2014/11/19 职场文书
党员进社区活动总结
2015/05/07 职场文书
2015年中学团委工作总结
2015/07/22 职场文书
小学班级管理心得体会
2016/01/07 职场文书
python中使用 unittest.TestCase单元测试的用例详解
2021/08/30 Python