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操作Cookies包括(读取添加与删除)
Dec 26 Javascript
angularjs实现首页轮播图效果
Apr 14 Javascript
Angular模板表单校验方法详解
Aug 11 Javascript
React-Native中禁用Navigator手势返回的示例代码
Sep 09 Javascript
JS实现div模块的截图并下载功能
Oct 17 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
Mar 05 Javascript
javascript+HTML5 canvas绘制时钟功能示例
May 15 Javascript
jquery实现的分页显示功能示例
Aug 23 jQuery
Vue.js实现立体计算器
Feb 22 Javascript
JS浏览器BOM常见操作实例详解
Apr 27 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
Apr 27 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
Jul 28 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
利用浏览器的Javascript控制台调试PHP程序
2014/01/08 PHP
解决php接收shell返回的结果中文乱码问题
2014/01/23 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
javascript prototype原型操作笔记
2009/12/07 Javascript
JQuery实现的图文自动轮播效果插件
2015/06/19 Javascript
jQuery切换所有复选框选中状态的方法
2015/07/02 Javascript
jquery实现文本框textarea自适应高度
2016/03/09 Javascript
Bootstrap警告(Alerts)的实现方法
2017/03/22 Javascript
angular4中引入echarts的方法示例
2019/01/29 Javascript
基于JS实现简单滑块拼图游戏
2019/10/12 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
2020/05/10 Javascript
[03:14]2014DOTA2西雅图国际邀请赛 EG战队巡礼
2014/07/07 DOTA
[28:48]《真视界》- 2017年国际邀请赛
2017/09/27 DOTA
[58:59]完美世界DOTA2联赛PWL S3 access vs CPG 第一场 12.13
2020/12/16 DOTA
Python 文件操作技巧(File operation) 实例代码分析
2008/08/11 Python
python爬虫获取新浪新闻教学
2018/12/23 Python
解决Pandas的DataFrame输出截断和省略的问题
2019/02/08 Python
python多线程同步实例教程
2019/08/11 Python
Python替换NumPy数组中大于某个值的所有元素实例
2020/06/08 Python
HTML5中如何显示视频呢 HTML5视频播放demo
2013/06/08 HTML / CSS
关于iframe跨域使用postMessage的实现
2019/10/29 HTML / CSS
计算机专业学生求职信分享
2013/12/15 职场文书
省优秀教师事迹材料
2014/01/30 职场文书
小学三八妇女节活动方案
2014/03/16 职场文书
租房合同协议书
2014/04/09 职场文书
技校毕业生自荐信
2014/06/03 职场文书
拒绝黄毒毒宣传标语
2014/06/26 职场文书
基层干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
作文批改评语
2014/12/25 职场文书
事业单位年度考核个人总结
2015/02/12 职场文书
工会文体活动总结
2015/05/07 职场文书
浅析CSS在DevTools 中架构演变
2021/10/05 HTML / CSS
php去除deprecated的实例方法
2021/11/17 PHP
Oracle使用别名的好处
2022/04/19 Oracle
一文搞懂PHP中的抽象类和接口
2022/05/25 PHP