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 相关文章推荐
JCalendar 日历控件 v1.0 beta[兼容IE&Firefox] 有文档和例子
May 30 Javascript
js跨域问题之跨域iframe自适应大小实现代码
Jul 17 Javascript
js注意img图片的onerror事件的分析
Jan 01 Javascript
js和jquery如何获取图片真实的宽度和高度
Sep 28 Javascript
使用js画图之画切线
Jan 12 Javascript
jQuery实现鼠标滑过点击事件音效试听
Aug 31 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
Mar 22 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
Jun 17 Javascript
JavaScript判断数组是否存在key的简单实例
Aug 03 Javascript
headjs实现网站并行加载但顺序执行JS
Nov 29 Javascript
javascript中BOM基础知识总结
Feb 14 Javascript
React中ES5与ES6写法的区别总结
Apr 21 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
PHPExcel读取Excel文件的实现代码
2011/12/06 PHP
Zend Framework教程之Zend_Helpers动作助手ViewRenderer用法详解
2016/07/20 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
jquery BS,dialog控件自适应大小
2009/07/06 Javascript
javascript计时器事件使用详解
2014/01/07 Javascript
JavaScript的strict模式与with关键字介绍
2014/02/08 Javascript
jquery中filter方法用法实例分析
2015/02/06 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
2015/11/25 Javascript
JS实现消息来时让网页标题闪动效果的方法
2016/04/20 Javascript
jquery实现无刷新验证码的简单实例
2016/05/19 Javascript
jquery html5 视频播放控制代码
2016/11/06 Javascript
基于jQuery实现的查看全文功能【实用】
2016/12/11 Javascript
走进AngularJs之过滤器(filter)详解
2017/02/17 Javascript
微信小程序--组件(swiper)详细介绍
2017/06/13 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
2017/09/19 jQuery
Vue.js搭建移动端购物车界面
2020/06/28 Javascript
详解@angular/cli 改变默认启动端口两种方式
2018/11/29 Javascript
JavaScript复制变量三种方法实例详解
2020/01/09 Javascript
js实现带积分弹球小游戏
2020/07/21 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
2020/09/16 Javascript
python使用os.listdir和os.walk获得文件的路径的方法
2017/12/16 Python
分析Python中解析构建数据知识
2018/01/20 Python
python实战之实现excel读取、统计、写入的示例讲解
2018/05/02 Python
Python使用OpenCV进行标定
2018/05/08 Python
Python中的heapq模块源码详析
2019/01/08 Python
对python条件表达式的四种实现方法小结
2019/01/30 Python
Python OpenCV 使用滑动条来调整函数参数的方法
2019/07/08 Python
python redis连接 有序集合去重的代码
2019/08/04 Python
行政主管岗位职责
2013/11/18 职场文书
餐饮业员工工作决心书
2014/03/11 职场文书
工厂搬迁方案
2014/05/11 职场文书
学校教师安全责任书
2014/07/23 职场文书
好的促销活动方案
2014/08/21 职场文书
政府个人对照检查材料
2014/08/28 职场文书
好媳妇事迹材料
2014/12/24 职场文书
工厂仓管员岗位职责
2015/04/01 职场文书