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 相关文章推荐
js中settimeout方法加参数
Feb 28 Javascript
jQuery on方法传递参数示例
Dec 09 Javascript
javascript每日必学之基础入门
Feb 16 Javascript
js css+html实现简单的日历
Jul 14 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
Jan 18 Javascript
Javascript ES6中数据类型Symbol的使用详解
May 02 Javascript
Express系列之multer上传的使用
Oct 27 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
Jan 31 Javascript
你点的 ES6一些小技巧,请查收
Apr 25 Javascript
vue-router动态设置页面title的实例讲解
Aug 30 Javascript
webpack中的模式(mode)使用详解
Feb 20 Javascript
vue 监听 Treeselect 选择项的改变操作
Aug 31 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
Zend Studio 无法启动的问题解决方法
2008/12/04 PHP
ajax php 实现写入数据库
2009/09/02 PHP
PHP 引用文件技巧
2010/03/02 PHP
PHP运行出现Notice : Use of undefined constant 的完美解决方案分享
2012/03/05 PHP
php微信公众平台开发之微信群发信息
2016/09/13 PHP
php/JS实现的生成随机密码(验证码)功能示例
2019/06/06 PHP
php设计模式之享元模式分析【星际争霸游戏案例】
2020/03/23 PHP
jquery获取input的value问题说明
2010/08/19 Javascript
JQuery实现表格动态增加行并对新行添加事件
2014/07/30 Javascript
JavaScript中的标签语句用法分析
2015/02/10 Javascript
原生JavaScript实现瀑布流布局
2020/06/28 Javascript
javascript中arguments,callee,caller详解
2016/03/16 Javascript
js实现楼层效果的简单实例
2016/07/15 Javascript
Html5+jQuery+CSS制作相册小记录
2016/12/30 Javascript
微信小程序中显示倒计时代码实例
2019/05/09 Javascript
js模拟F11页面全屏显示
2019/09/17 Javascript
JS检测浏览器开发者工具是否打开的方法详解
2020/10/02 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
[02:02:38]VG vs Mineski Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
python中合并两个文本文件并按照姓名首字母排序的例子
2014/04/25 Python
Python采用raw_input读取输入值的方法
2014/08/18 Python
python文件写入实例分析
2015/04/08 Python
整理Python最基本的操作字典的方法
2015/04/24 Python
Python基于pillow判断图片完整性的方法
2016/09/18 Python
pytorch之添加BN的实现
2020/01/06 Python
Myprotein意大利官网:欧洲第一运动营养品牌
2018/11/22 全球购物
Hush Puppies澳大利亚官网:舒适的男女休闲和正装鞋
2019/08/24 全球购物
自荐信需注意事项
2014/01/25 职场文书
公司会计岗位职责
2014/02/13 职场文书
校园公益广告语
2014/03/13 职场文书
建筑投标担保书
2014/05/20 职场文书
食品安全处置方案
2014/06/14 职场文书
应届生自荐书
2014/06/23 职场文书
2014年审计工作总结
2014/11/17 职场文书
甲午风云观后感
2015/06/02 职场文书
优秀创业计划书分享
2019/07/19 职场文书