用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 相关文章推荐
JavaScript 页面坐标相关知识整理
Jan 09 Javascript
js 回车提交表单两种实现方法
Dec 31 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
Mar 06 Javascript
JavaScript中的索引数组、关联数组和静态数组、动态数组讲解
Nov 08 Javascript
javascript中函数作为参数调用的方法
Feb 09 Javascript
JavaScript的Number对象的toString()方法
Dec 18 Javascript
基于JavaScript实现下拉列表左右移动代码
Feb 07 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
Mar 11 Javascript
Angular 4依赖注入学习教程之简介(一)
Jun 04 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
Aug 22 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
Dec 16 Javascript
Element PageHeader页头的使用方法
Jul 26 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创建PDF中文文档
2006/10/09 PHP
PHP6 mysql连接方式说明
2009/02/09 PHP
php的数组与字符串的转换函数整理汇总
2013/07/18 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
JS 的应用开发初探(mootools)
2009/12/19 Javascript
jquery 的 $("#id").html() 无内容的解决方法
2010/06/07 Javascript
基本jquery的控制tabs打开的数量的代码
2010/10/17 Javascript
关于捕获用户何时点击window.onbeforeunload的取消事件
2011/03/06 Javascript
多种方法判断Javascript对象是否存在
2013/09/22 Javascript
JavaScript常用标签和方法总结
2015/09/01 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
2017/01/16 Javascript
浅谈如何使用 webpack 优化资源
2017/10/20 Javascript
通俗易懂地解释JS中的闭包
2017/10/23 Javascript
vue.js  父向子组件传参的实例代码
2017/10/29 Javascript
微信小程序支付及退款流程详解
2017/11/30 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
2018/04/26 Javascript
JS立即执行函数功能与用法分析
2019/01/15 Javascript
详解JavaScript 为什么要有 Symbol 类型?
2019/04/03 Javascript
[01:45]IMBATV TI4前线报道-选手到达
2014/07/07 DOTA
Python实例分享:快速查找出被挂马的文件
2014/06/08 Python
Python编程入门的一些基本知识
2015/05/13 Python
Flask解决跨域的问题示例代码
2018/02/12 Python
对python的bytes类型数据split分割切片方法
2018/12/04 Python
详解程序意外中断自动重启shell脚本(以Python为例)
2019/07/26 Python
python hashlib加密实现代码
2019/10/17 Python
解决python便携版无法直接运行py文件的问题
2020/09/01 Python
python 中 .py文件 转 .pyd文件的操作
2021/03/04 Python
美国最大的半成品净菜电商:Blue Apron(蓝围裙)
2018/04/27 全球购物
英国天然宝石首饰购买网站:Gemondo Jewellery
2018/10/23 全球购物
医药代表个人求职信范本
2013/12/19 职场文书
公务员转正鉴定材料
2014/02/11 职场文书
高中运动会广播稿
2014/09/16 职场文书
医德医风个人总结
2015/02/28 职场文书
出国留学自荐信模板
2015/03/06 职场文书
改进工作作风心得体会
2016/01/23 职场文书
升职自荐书
2019/05/09 职场文书