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代码
Mar 16 Javascript
xss文件页面内容读取(解决)
Nov 28 Javascript
jQuery前端分页示例分享
Feb 10 Javascript
JQuery中节点遍历方法实例
May 18 Javascript
JavaScript中this详解
Sep 01 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
Feb 08 Javascript
node.js入门学习之url模块
Feb 25 Javascript
80%应聘者都不及格的JS面试题
Mar 21 Javascript
利用node.js本地搭建HTTP服务器
Apr 19 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
Jun 11 Javascript
小发现之浅谈location.search与location.hash的问题
Jun 23 Javascript
JavaScript this指向相关原理及实例解析
Jul 10 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删除二维数组中相同元素及数组重复值的方法示例
2017/05/05 PHP
PHP一个简单的无需刷新爬虫
2019/01/05 PHP
Yii框架连表查询操作示例
2019/09/06 PHP
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
2010/04/13 Javascript
在网页中使用document.write时遭遇的奇怪问题
2010/08/24 Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
2011/08/02 Javascript
Ajax清除浏览器js、css、图片缓存的方法
2015/08/06 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
2015/08/27 Javascript
JS延时器提示框的应用实例代码解析
2016/04/27 Javascript
javascript ES6中箭头函数注意细节小结
2017/02/17 Javascript
Vue.js路由vue-router使用方法详解
2017/03/20 Javascript
简单谈谈关于Angular Cli打包的事
2017/09/05 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
2018/08/24 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
2019/08/26 Javascript
符合语言习惯的 Python 优雅编程技巧【推荐】
2018/09/25 Python
Python爬虫实现的根据分类爬取豆瓣电影信息功能示例
2019/09/15 Python
Python检查图片是否损坏及图片类型是否正确过程详解
2019/09/30 Python
python实现根据文件格式分类
2019/10/31 Python
Python 实现Numpy中找出array中最大值所对应的行和列
2019/11/26 Python
Python API len函数操作过程解析
2020/03/05 Python
python游戏开发的五个案例分享
2020/03/09 Python
python如何判断IP地址合法性
2020/04/05 Python
在python image 中实现安装中文字体
2020/05/16 Python
Python定义一个Actor任务
2020/07/29 Python
Python环境配置实现pip加速过程解析
2020/11/27 Python
Python爬虫之Selenium鼠标事件的实现
2020/12/04 Python
通用的Django注册功能模块实现方法
2021/02/05 Python
今天学到的CSS最新技术(与图片背景相关)
2012/12/24 HTML / CSS
css3的transform造成z-index无效解决方案
2014/12/04 HTML / CSS
丝芙兰墨西哥官网:Sephora墨西哥
2020/05/30 全球购物
机械机修工岗位职责
2014/08/03 职场文书
会计系毕业求职信
2014/08/07 职场文书
小学国庆节活动方案策划书
2014/09/16 职场文书
2014年青年教师工作总结
2014/12/17 职场文书
大学生自荐材料范文
2014/12/30 职场文书
升职自荐书
2019/05/09 职场文书