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

用Vue-cli搭建的项目中引入css报错的原因分析

用Vue-cli搭建的项目中引入css报错的原因分析

我最近在研究Vue的路上,今天遇到了个问题,在vue cli 引入css报错,后来查询了很多资料,那么今天也算个学习笔记吧!

1.问题描述

之前用vue-cli搭建的项目,在main.js中引入elementUI库中的css,或者在其他文件中(比如App.vue)引入自己的css文件(假如你的文件是在src目录下),都会报一个相同的错。下如图

经过一番折腾之后发现需要在build文件下的webpack.base.conf.js中加上下面的代码即可

{  test: /\.css$/,  include: [   /src/,//表示在src目录下的css需要编译   '/node_modules/element-ui/lib/'  //增加此项  ],  loader: 'style-loader!css-loader' }, 

另外说明下假如你的css文件是在src目录下的话就添加src的路径,如上图,element-ui或者mint-ui(minit-ui的我没试过,个人认为也要加上去webpack才能查找到),假如你的css文件是在其他目录下的,原理一样。

注:以上是个人在开发中遇到的一个问题以及解决方式,如有出入或者不严谨地方还请指出!希望能够帮到您。在此也非常感谢大家对网站的支持!

相关文章

基于es6三点运算符的使用方法 | 实

基于es6三点运算符的使用方法 | 实

运算符,三点,使用方法,实例,电脑软件,先看一个es6规范下三点运算符的使用实例:let fun=function(a,...list){ console.log(a,list);};fun('0','a','b','c');//0 [a,b,c]以上可以看到我们现在在定义函数对象时可以动态设置参数的个数…

js 性能优化之算法和流程控制

js 性能优化之算法和流程控制

性能优化,流程控制,算法,电脑软件,js,循环处理是最常见的编程模式之一,也是提升性能必须关注的要点之一。常见的优化方案有:①JavaScript的四种循环(for、do-while、while、for-in)中,for-in循环比其他几种明显要慢。由于每次迭代操作会同时搜…

快速理解 JavaScript 中的 LHS 和

快速理解 JavaScript 中的 LHS 和

查询,快速,电脑软件,LHS,JavaScript,JavaScript 程序中的一段源代码在执行之前会经历三个步骤,统称为 编译分词/词法分析 解析/语法分析 代码生成先看原书对一个赋值操作的拆解说明:变量的赋值操作会执行两个动作,首先编译器会在当前作用域…

PS如何用手拿旧照片制作旧地重游的

PS如何用手拿旧照片制作旧地重游的

照片,如何用,手拿,特效,电脑软件,本教程来自P大点S的Projava!以前也有不少人做过类似的效果,就是一个人拿着一张以前拍的旧照片回到老地方寻找相同的视角,貌似很有意境。但是我找的素材不是很好。将就看看吧。最终效果:主要过程:首先我在百度找…

PHP 获取 ping 时间的实现方法

PHP 获取 ping 时间的实现方法

方法,时间,电脑软件,PHP,ping,PHP 可以通过exec函数执行shell命令,来获取ping时间。代码示例:echo 'PHP_INT_MAX : ' . PHP_INT_MAX . "<br><br>"; $ip = '115.29.237.28'; // IP地址 if (PATH_SEPARATOR==':') // linux{ echo …

bootstrap Table的一些小操作

bootstrap Table的一些小操作

操作,些小,电脑软件,bootstrap,Table,本文实例为大家分享了bootstrap Table的操作代码,供大家参考,具体内容如下function HQCreatTable(ob) { var option = { cache: false,//是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*…

基于构造函数的五种继承方法小结

基于构造函数的五种继承方法小结

继承,方法,构造函数,五种,电脑软件,1.使用call或apply绑定构造函数animal.apply(this.arguments)2.使用prototype属性  Cat.prototype = new Animal();  Cat.prototype.constructor = Cat;  var cat1 = new Cat("大毛","黄色");…

ps怎么利用矩形工具制作相册样式?

ps怎么利用矩形工具制作相册样式?

工具,矩形,样式,电脑软件,ps,ps用矩形工具制作相册版式?方法很简单,快来学习一下吧。 软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更新时间:2015-11-041、、打开ps,点击&ldquo;文件&rdquo;-&ldquo;打开&rdquo;,把背景图片打…

JavaScript标准对象_动力节点Java

JavaScript标准对象_动力节点Java

标准对象,学院,节点,动力,电脑软件,在JavaScript的世界里,一切都是对象。但是某些对象还是和其他对象不太一样。为了区分对象的类型,我们用typeof操作符获取对象的类型,它总是返回一个字符串:typeof 123; // 'number'typeof NaN; // 'number…

Photoshop制作精致的灰色圆形质感

Photoshop制作精致的灰色圆形质感

质感,按钮,灰色,精致,电脑软件,最终效果 1、新建一个大小适当的文档,背景填充灰色。2、新建图层,选择&ldquo;椭圆&rdquo;工具进行绘制。3、为&ldquo;形状 1&rdquo;添加图层样式&ldquo;投影&rdquo;效果。 4、更改&ldquo;形状 1&rdquo;的填充为…

清除Win7系统DNS缓存

清除Win7系统DNS缓存

清除,系统,缓存系统,缓存,电脑软件,有些时候,由于某些原因,系统访问网站的时候会提示需要清除本地的dns信息,或者出现dns解析故障就必须清理系统dns缓存。有些用户碰到这些情况的时候不知道该怎么办。别着急,针对这个情况小编今天就来教大家怎…

CorelDRAW X7软件制作一个中国联通

CorelDRAW X7软件制作一个中国联通

教程,标志,电脑软件,CorelDRAW,Logo,效果图:制作步骤:Lo标志具有创意独特性,需要设计师天马行空的想象,在绘制Lo标志时,CorelDRAW X7软件可以提供多种工具方便Lo的造型。本教程将带大家详解用CorelDRAW X7软件制作联通Lo标志的一种方法。选择&…