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 相关文章推荐
use jscript List Installed Software
Jun 11 Javascript
ExtJS 2.0实用简明教程 之获得ExtJS
Apr 29 Javascript
使用javascript创建快捷方式的简单实例
Aug 09 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
Mar 28 Javascript
js定义类的几种方法(推荐)
Jun 08 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
Aug 25 Javascript
JavaScript+HTML5实现的日期比较功能示例
Jul 12 Javascript
vue resource post请求时遇到的坑
Oct 19 Javascript
解决vue router组件状态刷新消失的问题
Aug 01 Javascript
学习React中ref的两个demo示例
Aug 14 Javascript
Angular2 自定义表单验证器的实现方法
Dec 14 Javascript
深入webpack打包原理及loader和plugin的实现
May 06 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删除指定目录中的所有目录及文件的方法
2015/02/26 PHP
thinkPHP交易详情查询功能详解
2016/12/02 PHP
PHP实现cookie跨域session共享的方法分析
2019/08/23 PHP
php字符串函数 str类常见用法示例
2020/05/15 PHP
异步加载script的代码
2011/01/12 Javascript
jQuery获得子元素个数的方法
2015/04/14 Javascript
js获取滚动距离的方法
2015/05/30 Javascript
JS实现方向键切换输入框焦点的方法
2015/08/19 Javascript
AngularJs Injecting Services Into Controllers详解
2016/09/02 Javascript
最全的JavaScript开发工具列表 总有一款适合你
2017/06/29 Javascript
用vue写一个仿简书的轮播图的示例代码
2018/03/13 Javascript
vue和webpack打包项目相对路径修改的方法
2018/06/15 Javascript
JS实现水平移动与垂直移动动画
2019/12/19 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
2020/01/16 Javascript
Javascript幻灯片播放功能实现过程解析
2020/05/07 Javascript
微信小程序实现多张图片上传功能
2020/11/18 Javascript
python根据开头和结尾字符串获取中间字符串的方法
2015/03/26 Python
ubuntu系统下使用pm2设置nodejs开机自启动的方法
2018/05/12 NodeJs
python中for用来遍历range函数的方法
2018/06/08 Python
python 判断字符串中是否含有汉字或非汉字的实例
2019/07/15 Python
Python中xml和dict格式转换的示例代码
2019/11/07 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
python网络编程之五子棋游戏
2020/05/14 Python
HTML5的结构和语义(2):结构
2008/10/17 HTML / CSS
Hawes & Curtis澳大利亚官网:英国经典服饰品牌
2018/10/29 全球购物
食品营养与检测应届生求职信
2013/11/08 职场文书
《颐和园》教学反思
2014/02/26 职场文书
保险经纪人求职信
2014/03/11 职场文书
艺术教育实施方案
2014/05/03 职场文书
2014派出所所长群众路线对照检查材料思想汇报
2014/09/18 职场文书
2014年双拥工作总结
2014/11/21 职场文书
2015年暑期实践报告范文
2015/07/13 职场文书
工作服管理制度范本
2015/08/06 职场文书
2016年暑期教师培训心得体会
2016/01/09 职场文书
古诗文之爱国名句(77句)
2019/09/24 职场文书
SQLServer2019 数据库环境搭建与使用的实现
2021/04/08 SQL Server