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


Posted in Javascript onJuly 20, 2017

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

1.问题描述

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

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

经过一番折腾之后发现需要在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文件是在其他目录下的,原理一样。

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

Javascript 相关文章推荐
在线编辑器中换行与内容自动提取
Apr 24 Javascript
JavaScript 通过模式匹配实现重载
Aug 12 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
Feb 03 Javascript
JS日期格式化之javascript Date format
Oct 01 Javascript
javascript实现tab切换的两个实例
Nov 05 Javascript
javascript中tostring()和valueof()的用法及两者的区别
Nov 16 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
Dec 14 Javascript
原生js实现简单的Ripple按钮实例代码
Mar 24 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
Oct 17 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
原生Js 实现的简单无缝滚动轮播图的示例代码
May 10 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
Jul 20 #Javascript
微信小程序获取微信运动步数的实例代码
Jul 20 #Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
Jul 20 #Javascript
angular动态删除ng-repaeat添加的dom节点的方法
Jul 20 #Javascript
如何使用JS在HTML中自定义字符串格式化
Jul 20 #Javascript
详解用webpack把我们的业务模块分开打包的方法
Jul 20 #Javascript
关于webpack代码拆分的解析
Jul 20 #Javascript
You might like
PHP调用三种数据库的方法(3)
2006/10/09 PHP
PHP7匿名类用法分析
2016/09/26 PHP
关于__defineGetter__ 和__defineSetter__的说明
2007/05/12 Javascript
js导出格式化的excel 实例方法
2013/07/17 Javascript
JS设置获取cookies的方法
2014/01/26 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
2015/06/08 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
2015/08/31 Javascript
JS+CSS实现的经典tab选项卡效果代码
2015/09/16 Javascript
JavaScript学习笔记之创建对象
2016/03/25 Javascript
同步异步动态引入js文件的几种方法总结
2016/09/23 Javascript
深入理解bootstrap框架之入门准备
2016/10/09 Javascript
JavaScript页面实时显示当前时间实例代码
2016/10/23 Javascript
Bootstrap栅格系统的使用和理解2
2016/12/14 Javascript
Nodejs多站点切换Htpps协议详解及简单实例
2017/02/23 NodeJs
深入理解 JavaScript 中的 JSON
2017/04/06 Javascript
nodejs开发微信小程序实现密码加密
2017/07/11 NodeJs
详解JavaScript中的六种错误类型
2017/09/21 Javascript
Vue修改mint-ui默认样式的方法
2018/02/03 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
2018/02/22 Javascript
再谈Python中的字符串与字符编码(推荐)
2016/12/14 Python
Python3实现腾讯云OCR识别
2018/11/27 Python
python通过paramiko复制远程文件及文件目录到本地
2019/04/30 Python
十行代码使用Python写一个USB病毒
2019/06/21 Python
python 计算平均平方误差(MSE)的实例
2019/06/29 Python
tensorflow 利用expand_dims和squeeze扩展和压缩tensor维度方式
2020/02/07 Python
Pycharm 安装 idea VIM插件的图文教程详解
2020/02/21 Python
Python任务自动化工具tox使用教程
2020/03/17 Python
Django ORM 查询表中某列字段值的方法
2020/04/30 Python
Python Dict找出value大于某值或key大于某值的所有项方式
2020/06/05 Python
Yahoo-PHP面试题3
2012/01/14 面试题
平面网站制作专科生的自我评价分享
2013/12/11 职场文书
机关党员2014全国两会学习心得体会
2014/03/10 职场文书
开发房地产协议书
2014/09/14 职场文书
刘胡兰观后感
2015/06/16 职场文书
golang interface判断为空nil的实现代码
2021/04/24 Golang
python numpy中multiply与*及matul 的区别说明
2021/05/26 Python