vue中配置mint-ui报css错误问题的解决方法


Posted in Javascript onOctober 11, 2017

在vue2.0中引入了mint-ui后总是报一个css的错误

vue中配置mint-ui报css错误问题的解决方法

但是package.json中已经配置了css-loader style-loader ,webpack.config中也已经配置了css,还是报这个错误,相反,如果把webpack.config中css的配置注释掉就不会出错,这是为什么呢?

因为 在webpack.config中没有设置好css引入的目录,因为默认情况下我们只会引入/src/目录下的css, 但是mint-ui是要冲node_modules目录去引入的,所以在webpack.config中css的配置中加入一项

{
    test: /\.css$/,
    include: [
     /src/,
     '/node_modules/mint-ui/lib/'  //增加此项
    ],
    loader: "style!css"
   },

当然,. babelrc中要配置成这样的:

{
 "presets": [
    "es2015","stage-0"
    ],
 "plugins": [
  ["component", [
   { 
    "libraryName": "mint-ui",
    "style": true 
   }
  ]]
 ]
}

要确保es6转义成es5的插件都已经安装,

vue中配置mint-ui报css错误问题的解决方法

webpack.config中要配置完整:

vue中配置mint-ui报css错误问题的解决方法

如果webpack.config中没有配置presets:[‘es2015'],的话会报一个import的错误:

vue中配置mint-ui报css错误问题的解决方法 

这个错误就是因为es6的语法转义失败造成的

注:webpack.config的配置要根据webpack的版本,不同的版本配置方法不一样,我这里使用的是webpack1.0的版本

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
json 入门基础教程 推荐
Oct 31 Javascript
jquery.AutoComplete.js中文修正版(支持firefox)
Apr 09 Javascript
可编辑下拉框的2种实现方式
Jun 13 Javascript
node.js开机自启动脚本文件
Dec 24 Javascript
解析javascript中鼠标滚轮事件
May 26 Javascript
Windows系统下Node.js的简单入门教程
Jun 23 Javascript
jQuery操作动态生成的内容的方法
May 28 Javascript
JavaScript设计模式之策略模式详解
Jun 09 Javascript
JQuery元素快速查找与操作
Apr 22 jQuery
解决Vue2.0中使用less给元素添加背景图片出现的问题
Sep 03 Javascript
vue中keep-alive内置组件缓存的实例代码
Apr 16 Javascript
微信小程序实现滑动操作代码
Apr 23 Javascript
node.js操作MongoDB的实例详解
Oct 11 #Javascript
简单谈谈vue的过渡动画(推荐)
Oct 11 #Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
Oct 11 #Javascript
jQuery实现的事件绑定功能基本示例
Oct 11 #jQuery
AngularJS中下拉框的高级用法示例
Oct 11 #Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
Oct 11 #Javascript
AngularJS中下拉框的基本用法示例
Oct 11 #Javascript
You might like
Terran建筑一览
2020/03/14 星际争霸
php中常用的预定义变量小结
2012/05/09 PHP
深入了解PHP类Class的概念
2012/06/14 PHP
thinkPHP实现表单自动验证
2014/12/24 PHP
以文件形式缓存php变量的方法
2015/06/26 PHP
url地址自动加#号问题说明
2010/08/21 Javascript
js取float型小数点后两位数的方法
2014/01/18 Javascript
jQuery内容过滤选择器用法分析
2015/02/10 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
2015/12/10 Javascript
深入理解jQuery3.0的domManip函数
2016/09/01 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
2017/03/09 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
2017/04/12 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
2017/04/21 Javascript
nginx+vue.js实现前后端分离的示例代码
2018/02/12 Javascript
JS和Canvas实现图片的预览压缩和上传功能
2018/03/30 Javascript
vue树形结构获取键值的方法示例
2018/06/21 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
2018/09/30 Javascript
使用vuepress搭建静态博客的示例代码
2019/02/14 Javascript
vue远程加载sfc组件思路详解
2019/12/25 Javascript
python实现自动登录人人网并访问最近来访者实例
2014/09/26 Python
Python中的is和id用法分析
2015/01/26 Python
Python异常学习笔记
2015/02/03 Python
Python标准库06之子进程 (subprocess包) 详解
2016/12/07 Python
python安装cx_Oracle模块常见问题与解决方法
2017/02/21 Python
在pandas多重索引multiIndex中选定指定索引的行方法
2018/11/16 Python
解决Django后台ManyToManyField显示成Object的问题
2019/08/09 Python
Spark处理数据排序问题如何避免OOM
2020/05/21 Python
俄罗斯护发和专业化妆品购物网站:Hihair
2019/09/28 全球购物
运动会广播稿200米
2014/01/27 职场文书
收银出纳员岗位职责
2014/02/23 职场文书
2014年公务员思想汇报范文:全心全意为人民服务
2014/03/06 职场文书
2014年教师节活动总结
2014/08/29 职场文书
2015年教育实习工作总结
2015/04/24 职场文书
2016年优秀教师先进事迹材料
2016/02/26 职场文书
JavaScript文档对象模型DOM
2021/11/20 Javascript
SpringBoot Http远程调用的方法
2022/08/14 Java/Android