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 函数的执行环境和作用域链的深入解析
Nov 01 Javascript
jquery写个checkbox——类似邮箱全选功能
Mar 19 Javascript
浅谈类似于(function(){}).call()的js语句
Mar 30 Javascript
JS实现的最简Table选项卡效果
Oct 14 Javascript
js图片轮播效果实现代码
Apr 18 Javascript
纯JavaScript手写图片轮播代码
Oct 20 Javascript
jQuery Validate验证框架详解(推荐)
Dec 17 Javascript
Vue自定义事件(详解)
Aug 19 Javascript
Bootstrap图片轮播效果详解
Oct 17 Javascript
详解微信小程序之一键复制到剪切板
Apr 24 Javascript
JavaScript修改注册表实例代码
Jan 05 Javascript
JS轮播图的实现方法2
Aug 25 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
采用header定义为文件然后readfile下载(隐藏下载地址)
2014/01/31 PHP
php反射类ReflectionClass用法分析
2016/05/12 PHP
详解PHP素材图片上传、下载功能
2019/04/12 PHP
PHP从零开始打造自己的MVC框架之入口文件实现方法详解
2019/06/03 PHP
jquery easyui combox一些实用的小方法
2013/12/25 Javascript
jQuery如何取id有.的值一般的方法是取不到的
2014/04/18 Javascript
JavaScript实现的多个图片广告交替显示效果代码
2015/09/04 Javascript
Javascript删除指定元素节点的方法
2016/06/21 Javascript
vue.js入门教程之绑定class和style样式
2016/09/02 Javascript
bootstrap 表单验证使用方法
2017/01/11 Javascript
jquery表单插件form使用方法详解
2017/01/20 Javascript
详解vuejs几种不同组件(页面)间传值的方式
2017/06/01 Javascript
vue2.0 中#$emit,$on的使用详解
2017/06/07 Javascript
浅谈React Native 中组件的生命周期
2017/09/08 Javascript
webpack项目调试以及独立打包配置文件的方法
2018/02/28 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
2018/10/30 Javascript
[56:41]iG vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/17 DOTA
30分钟搭建Python的Flask框架并在上面编写第一个应用
2015/03/30 Python
Python反射的用法实例分析
2018/02/11 Python
OpenCV2从摄像头获取帧并写入视频文件的方法
2018/08/03 Python
利用python numpy+matplotlib绘制股票k线图的方法
2019/06/26 Python
Python urlopen()和urlretrieve()用法解析
2020/01/07 Python
matlab灰度图像调整及imadjust函数的用法详解
2020/02/27 Python
快速解决jupyter启动卡死的问题
2020/04/10 Python
Django使用rest_framework写出API
2020/05/21 Python
Python 没有main函数的原因
2020/07/10 Python
如何使用python socket模块实现简单的文件下载
2020/09/04 Python
美国知名的家庭连锁百货商店:Boscov’s
2017/07/27 全球购物
阿姆斯特丹杜莎夫人蜡像馆官方网站:Madame Tussauds Amsterdam
2019/03/12 全球购物
中介公司区域经理岗位职责范本
2014/03/02 职场文书
捐赠仪式主持词
2014/03/19 职场文书
司法所长先进事迹
2014/06/02 职场文书
2014院党委领导班子对照检查材料思想汇报
2014/09/24 职场文书
2015年质量月活动总结报告
2015/03/27 职场文书
Python入门学习之类的相关知识总结
2021/05/25 Python
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS