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 相关文章推荐
javaScript call 函数的用法说明
Apr 09 Javascript
JavaScript高级程序设计 客户端存储学习笔记
Sep 10 Javascript
Javascript浅谈之引用类型
Dec 18 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
Feb 13 Javascript
get(0).tagName获得作用标签示例代码
Oct 08 Javascript
JavaScript模块化开发之SeaJS
Dec 13 Javascript
简单介绍jsonp 使用小结
Jan 27 Javascript
node.js实现端口转发
Apr 14 Javascript
微信小程序 实现tabs选项卡效果实例代码
Oct 31 Javascript
bootstrap table sum总数量统计实现方法
Oct 29 Javascript
JS 图片压缩原理与实现方法详解
Apr 29 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
Sep 07 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中使用与Perl兼容的正则表达式
2006/11/26 PHP
PHP 程序员应该使用的10个组件
2009/10/31 PHP
php引用传值实例详解学习
2013/11/06 PHP
用js实现手把手教你月入万刀(转贴)
2007/11/07 Javascript
js 鼠标点击事件及其它捕获
2009/06/04 Javascript
jquery中获得$.ajax()事件返回的值并添加事件的方法
2010/04/15 Javascript
JavaScript中setAttribute用法介绍
2013/07/20 Javascript
js控制frameSet示例
2013/09/10 Javascript
原生js做的手风琴效果的导航菜单
2013/11/08 Javascript
JS网页图片按比例自适应缩放实现方法
2014/01/15 Javascript
Javascript基础教程之数据类型转换
2015/01/18 Javascript
BootStrap便签页的简单应用
2017/01/06 Javascript
jQuery遍历节点方法汇总(推荐)
2017/05/13 jQuery
利用javascript如何随机生成一定位数的密码
2017/09/22 Javascript
解决vue 按钮多次点击重复提交数据问题
2018/05/10 Javascript
webpack4.x CommonJS模块化浅析
2018/11/09 Javascript
[55:47]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第三局
2016/02/27 DOTA
[44:30]完美世界DOTA2联赛PWL S2 GXR vs Magma 第一场 11.25
2020/11/26 DOTA
python使用分治法实现求解最大值的方法
2015/05/12 Python
Python中time模块与datetime模块在使用中的不同之处
2015/11/24 Python
Python设计模式之代理模式实例详解
2019/01/19 Python
Pycharm之快速定位到某行快捷键的方法
2019/01/20 Python
Python中的pathlib.Path为什么不继承str详解
2019/06/23 Python
python requests使用socks5的例子
2019/07/25 Python
Python 线程池用法简单示例
2019/10/02 Python
pygame实现贪吃蛇游戏(下)
2019/10/29 Python
pycharm开发一个简单界面和通用mvc模板(操作方法图解)
2020/05/27 Python
Python定时任务APScheduler原理及实例解析
2020/05/30 Python
阿根廷在线宠物商店:Puppis
2018/03/23 全球购物
应届医学毕业生求职信分享
2013/12/02 职场文书
计算机应用专业毕业生求职信
2014/06/03 职场文书
个人年终总结怎么写
2015/03/09 职场文书
2015年政治教研组工作总结
2015/07/22 职场文书
安装配置mysql及Navicat prenium的详细流程
2021/06/10 MySQL
使用scrapy实现增量式爬取方式
2022/06/21 Python
Nginx文件已经存在全局反向代理问题排查记录
2022/07/15 Servers