用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 相关文章推荐
基于jQuery的图片大小自动适应实现代码
Nov 17 Javascript
19个很有用的 JavaScript库推荐
Jun 27 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
Jan 21 Javascript
js调用后台servlet方法实例
Jun 09 Javascript
计算新浪Weibo消息长度(还可以输入119字)
Jul 02 Javascript
node.js中的fs.appendFile方法使用说明
Dec 17 Javascript
jQuery实现的多级下拉菜单效果代码
Aug 24 Javascript
Javascript刷新窗口方法小结
Oct 21 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
Nov 17 Javascript
基于Jquery插件Uploadify实现实时显示进度条上传图片
Mar 26 Javascript
swiper自定义分页器使用方法详解
Sep 14 Javascript
js合并两个数组生成合并后的key:value数组
May 09 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 include,include_once,require,require_once
2008/09/05 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(八)
2014/06/23 PHP
php实现文件与16进制相互转换的方法示例
2017/02/16 PHP
ThinkPHP中create()方法自动验证实例
2017/04/26 PHP
Auntion-TableSort国人写的一个javascript表格排序的东西
2007/11/12 Javascript
javascript开发技术大全 第4章 直接量与字符集
2011/07/03 Javascript
JS实现仿QQ效果的三级竖向菜单
2015/09/25 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
2015/12/04 Javascript
jquery中实现时间戳与日期相互转换
2016/04/12 Javascript
javascript实现抽奖程序的简单实例
2016/06/07 Javascript
AngularJS基础 ng-include 指令示例讲解
2016/08/01 Javascript
AngularJS的ng Http Request与response格式转换方法
2016/11/07 Javascript
原生js实现addclass,removeclass,toggleclasss实例
2016/11/24 Javascript
jquery实现输入框实时输入触发事件代码
2016/12/21 Javascript
Bootstrap 手风琴菜单的实现代码
2017/01/20 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
2017/02/13 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
2018/02/11 Javascript
vue实现点击关注后及时更新列表功能
2018/06/26 Javascript
Python实现监控程序执行时间并将其写入日志的方法
2015/06/30 Python
Swift中的协议(protocol)学习教程
2016/07/08 Python
利用aardio给python编写图形界面
2017/08/21 Python
详解Python实现多进程异步事件驱动引擎
2017/08/25 Python
Python实现的多线程同步与互斥锁功能示例
2017/11/30 Python
Flask入门之上传文件到服务器的方法示例
2018/07/18 Python
检测tensorflow是否使用gpu进行计算的方式
2020/02/03 Python
使用CSS3的font-face字体嵌入样式的方法讲解
2016/05/13 HTML / CSS
法国二手MacBook销售网站:Okamac
2019/03/18 全球购物
医学院毕业生自荐信范文
2014/03/06 职场文书
音乐之声音乐广播稿
2014/09/10 职场文书
2014年最新党员对照检查材料汇总
2014/09/15 职场文书
八项规定个人对照检查材料思想汇报
2014/09/25 职场文书
人身意外保险授权委托书
2014/10/01 职场文书
2015年元旦标语大全
2014/12/09 职场文书
人民检察院起诉书
2015/05/20 职场文书
返乡农民工证明
2015/06/24 职场文书
python缺失值填充方法示例代码
2022/12/24 Python