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,超强推荐share.js
Dec 23 Javascript
根据地区不同显示时间的javascript代码
Aug 13 Javascript
javascript+xml实现简单图片轮换(只支持IE)
Dec 23 Javascript
js相册效果代码(点击创建即可)
Apr 16 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
Nov 13 Javascript
javascript实现五星评价代码(源码下载)
Aug 11 Javascript
浅谈JavaScript 标准对象
Jun 02 Javascript
原生js编写基于面向对象的分页组件
Dec 05 Javascript
如何编写一个完整的Angular4 FormText 组件
Nov 18 Javascript
值得收藏的vuejs安装教程
Nov 21 Javascript
浏览器事件循环与vue nextTicket的实现
Apr 16 Javascript
使用react-virtualized实现图片动态高度长列表的问题
May 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
图形数字验证代码
2006/10/09 PHP
php 解决旧系统 查出所有数据分页的类
2012/08/27 PHP
PHP下获取上个月、下个月、本月的日期(strtotime,date)
2014/02/02 PHP
php生成二维码图片方法汇总
2016/12/17 PHP
PHP观察者模式原理与简单实现方法示例
2017/08/25 PHP
JavaScript格式化数字的函数代码
2010/11/30 Javascript
javascript实现跳转菜单的具体方法
2013/07/05 Javascript
jQuery 获取浏览器所在的IP地址的小例子
2013/11/08 Javascript
从零学JSON之JSON数据结构
2014/05/19 Javascript
JS获取当前脚本文件的绝对路径
2016/03/02 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
2016/06/12 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
2017/01/13 Javascript
微信小程序中input标签详解及简单实例
2017/05/18 Javascript
微信小程序模版渲染详解
2018/01/26 Javascript
JavaScript继承定义与用法实践分析
2018/05/28 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
2019/01/27 Javascript
图文详解vue框架安装步骤
2019/02/12 Javascript
vue请求本地自己编写的json文件的方法
2019/04/25 Javascript
uni-app实现获取验证码倒计时功能
2020/11/01 Javascript
[47:03]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第二场 12.10
2020/12/13 DOTA
Python的字典和列表的使用中一些需要注意的地方
2015/04/24 Python
浅谈pytorch和Numpy的区别以及相互转换方法
2018/07/26 Python
基于numpy中数组元素的切片复制方法
2018/11/15 Python
不归路系列:Python入门之旅-一定要注意缩进!!!(推荐)
2019/04/16 Python
python模块导入的方法
2019/10/24 Python
荷兰鞋子在线:Nelson Schoenen
2017/12/25 全球购物
英国赛车、汽车改装和摩托车零件购物网站:Demon Tweeks
2018/10/29 全球购物
Hammitt官网:设计师手袋
2020/05/23 全球购物
如何写毕业求职自荐信
2013/11/06 职场文书
室内设计专业学生的自我评价分享
2013/11/27 职场文书
影视动画专业个人的自我评价
2013/12/31 职场文书
机械制造专业毕业生求职信
2014/03/02 职场文书
2015年元旦标语大全
2014/12/09 职场文书
大学生团员个人总结
2015/02/14 职场文书
党支部审查意见
2015/06/02 职场文书
python numpy中multiply与*及matul 的区别说明
2021/05/26 Python