当前位置:首页 > 日记 > 正文

VueJS如何引入css或者less文件的一些坑

VueJS如何引入css或者less文件的一些坑

我们在做Vue+webpack的时,难免会引入各种公共css样式文件,那么我们改如何引入呢?引入时会有那些坑呢?

首先,引入公共样式时,我们在“main.js”里使用AMD的方式引入,即

require('./assets/css/main.less');

这时,我们会抛出一个错误,是因为我们没有写解析的依赖,webpack不知道怎么解析

这时,我们要填写上依赖,

require('!style!css!less!./assets/css/main.less');

在很多以前的博客里都是以上写法,这个是Vue 2.0刚开始的,现在使用会报错;下面是正确写法  

require('!style-loader!css-loader!less-loader!./assets/css/main.less');

在以前配置到这里,就万事大吉了,也可以开始引入css文件了,然后现在到这里还会报错

当出现以上错误时,说明你的项目里缺少依赖;  

npm install style-loader --save

这时你就可以引入css文件了;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

相关文章

word如何将文字转换成word将文字转

word如何将文字转换成word将文字转

文字,方法,转换成,如何将,图片,  在使用word的时候有一个非常有有趣的功能,就是能将文字变成图片,例如,你要将文字猫变成图片猫,然后文章中所有的文字猫都变成了图片猫,是不是觉得像变魔术一样很神奇,那就跟我来学习吧。word将文字转换成图片的…

浅谈jQuery框架Ajax常用选项

浅谈jQuery框架Ajax常用选项

选项,框架,浅谈,常用,电脑软件,json(JavaScript Object Notation):轻量级的数据交换(交换的数据转换成与平台无关的)格式java对象转换成json字符串,使用ObjectMapper类的writeValueAsString(java对象);将json字符串或者json对象组成的数组…

qq安全中心申诉进度教程

qq安全中心申诉进度教程

安全中心,教程,方法,进度,电脑软件,  我提交了QQ申诉申请,我怎么知道申诉进度怎么样呢?怎么查询呢?还有如果我申诉成功了接来该怎么做呢?今天小编给你分享一下,欢迎阅读。qq安全中心申诉进度的方法由于提交申诉后你的QQ无法登录了,因此需…

AI教怎么给风景立方体添加阴影效果

AI教怎么给风景立方体添加阴影效果

阴影效果,风景,立方体,电脑软件,AI,上一节,我们已经讲解了如何制作一个风景立方体,为了让其看起来更加的真实,我们可能会想到让其添加一个倒影,阴影的效果,让其看起来类似与悬浮于空中,那这个投影又该怎么制作呢?软件名称:Adobe Illustrator CS6 (A…

写给vue新手们的vue渲染页面教程

写给vue新手们的vue渲染页面教程

教程,新手,页面,电脑软件,vue,前言本文主要给各位vue的新手们分享了关于vue渲染页面的教程,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。vue渲染页面路径图index.htmlApp.vuerouter.jsmain.js效果图:总结以上就是这篇文章…

PPT2013怎么设置自动显示当前页码

PPT2013怎么设置自动显示当前页码

显示,方法,页码,设置自动,电脑软件,  PPT中添加页码时会遇到一系列问题,例如怎么可以让图片的页码变成:1/50,这样的。大概的就是说,我共有50张幻灯片,现在放的是第1张。我只可以做到加成第一个,就是有个页脚1.但做不到可以显示总共的也在里面。…

excel表格边框变细的方法excel表格

excel表格边框变细的方法excel表格

边框,方法,表格,变细,电脑软件,  在Excel中录入数据都需要利用表格,而有时候会觉得表格的边框太粗了,需要变细,这个时候我们只要设置一下就好了。下面是小编带来的关于excel表格边框变细的方法,欢迎阅读!excel表格边框变细的方法边框变细步骤…

boostrapTable的refresh和refreshO

boostrapTable的refresh和refreshO

区别,电脑软件,boostrapTable,refresh,refreshOptions,在使用bootstrapTable时,刷新数据有两个方法refresh、refreshOptions,其用法相似:<table id="event_table"></table>...<script> $("#event_table").bootstrapTable('refresh', {ur…

Vue.js基础知识小结

Vue.js基础知识小结

基础知识,电脑软件,Vue,js,数据绑定1.单向绑定<div id="app"> {{massage}}</div>var app = new Vue({el:"#app",data:{message:"Hello,vue.js!"}2.双向绑定<div id="app"> <p>{{message}}</p><input v-model="message" /></div>…

PPT2013如何查看和改变动画顺序效

PPT2013如何查看和改变动画顺序效

动画,教程,图文教程,顺序,效果,  在下载的优良PPT中,经常都会有一些酷炫效果的动画效果,从视觉上并不能抓出所有动作,此时就需要在动画窗格中查看动画效果了,下面小编马上就告诉大家查看和改变动画顺序的方法。PPT2013查看和改变动画顺序效果…

Excel制作突出数据的扇形饼状图表

Excel制作突出数据的扇形饼状图表

饼状图,数据,扇形,方法,电脑软件,  Excel表格的数据想要做成扇形的饼状图,制作突出数据的扇形饼状图表,能够很好的突出数据。以下是小编为您带来的关于Excel制作突出数据的扇形饼状图表,希望对您有所帮助。Excel制作突出数据的扇形饼状图表1…

设计师解读7种主流平面设计风格的

设计师解读7种主流平面设计风格的

平面,设计风格,设计师,主流,心得,最近大热的波普艺术、极简艺术、孟菲斯风格、超写实艺术、mbe插画风格都是怎么做出来的,有哪些注意要点?来看你丫才美工这篇超全面的总结。第一种:波普艺术第二种:极简艺术第三种:孟菲斯艺术第四种:超写实艺术第…