用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 相关文章推荐
js Form.elements[i]的使用实例
Nov 13 Javascript
Javascript URI 解析介绍
Mar 15 Javascript
JavaScript中使用指数方法Math.exp()的简介
Jun 15 Javascript
javascript获取重复次数最多的字符
Jul 08 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
Dec 16 Javascript
js仿小米官网图片轮播特效
Sep 29 Javascript
JavaScript利用正则表达式替换字符串中的内容
Dec 12 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
Feb 01 Javascript
Vue组件中prop属性使用说明实例代码详解
May 31 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
Sep 21 Javascript
使用vue自定义指令开发表单验证插件validate.js
May 23 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
Jul 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
支持php4、php5的mysql数据库操作类
2008/01/10 PHP
phpcms模块开发之swfupload的使用介绍
2013/04/28 PHP
php分页代码学习示例分享
2014/02/20 PHP
PHP中header函数的用法及其注意事项详解
2016/06/13 PHP
PHP微信支付开发实例
2016/06/22 PHP
extjs实现选择多表自定义查询功能 前台部分(ext源码)
2011/12/20 Javascript
JavaScript等比例缩放图片控制超出范围的图片
2013/08/06 Javascript
js获取json元素数量的方法
2015/01/27 Javascript
JavaScript实现将文本框的值插入指定位置的方法
2015/08/13 Javascript
JavaScript基本数据类型及值类型和引用类型
2015/08/25 Javascript
JS获取鼠标坐标位置实例分析
2016/01/20 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
2016/10/28 Javascript
jQuery AJAX与jQuery事件的分析讲解
2019/02/18 jQuery
深入解读Node.js中的koa源码
2019/06/17 Javascript
原生JS无缝滑动轮播图
2019/10/22 Javascript
vue 实现通过vuex 存储值 在不同界面使用
2019/11/11 Javascript
不刷新网页就能链接新的js文件方法总结
2020/03/01 Javascript
python 文件和路径操作函数小结
2009/11/23 Python
Python中利用函数装饰器实现备忘功能
2015/03/30 Python
python实现的简单抽奖系统实例
2015/05/22 Python
Python浅复制中对象生存周期实例分析
2018/04/02 Python
python实现文本界面网络聊天室
2018/12/12 Python
OpenCV 轮廓检测的实现方法
2019/07/03 Python
Jupyter Notebook折叠输出的内容实例
2020/04/22 Python
详解canvas绘制多张图的排列顺序问题
2019/01/21 HTML / CSS
美国最便宜的旅游网站:CheapTickets
2017/07/09 全球购物
党委书记岗位职责
2013/11/24 职场文书
外贸采购员求职的自我评价
2013/11/26 职场文书
2014年医德医风工作总结
2014/11/13 职场文书
2015年全民国防教育日活动总结
2015/03/23 职场文书
环境保护宣传标语大全!
2019/06/28 职场文书
日本读研:怎样写好一篇日本研究计划书?
2019/07/15 职场文书
2020年基层司法所建设情况调研报告
2019/11/30 职场文书
python基于tkinter制作无损音乐下载工具
2021/03/29 Python
pycharm部署django项目到云服务器的详细流程
2021/06/29 Python
MySQL数据库配置信息查看与修改方法详解
2022/06/25 MySQL