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 相关文章推荐
JS 文件传参及处理技巧分析
May 13 Javascript
使用js写的一个简易的投票
Nov 27 Javascript
jquery实现弹出窗口效果的实例代码
Nov 28 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
Feb 24 Javascript
一个css与js结合的下拉菜单支持主流浏览器
Oct 08 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
Apr 16 Javascript
JS实现简洁、全兼容的拖动层实例
May 13 Javascript
JS逻辑运算符短路操作实例分析
Jul 09 Javascript
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
支付宝小程序tabbar底部导航
Nov 06 Javascript
vue实现户籍管理系统
May 29 Javascript
javascript实现时间日期的格式化的方法汇总
Aug 06 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
解析PHP无限级分类方法及代码
2013/06/21 PHP
PHP封装的Twitter访问类实例
2015/07/18 PHP
yii2-GridView在开发中常用的功能及技巧总结
2017/01/07 PHP
JQuery jsonp 使用示例代码
2009/08/12 Javascript
JavaScript 三种创建对象的方法
2009/10/16 Javascript
javascript实现图像循环明暗变化的方法
2015/02/25 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
2015/12/09 Javascript
jQuery实现的简单百分比进度条效果示例
2016/08/01 Javascript
AngularJS中的缓存使用
2017/01/11 Javascript
基于模板引擎Jade的应用(详解)
2017/12/12 Javascript
react 实现页面代码分割、按需加载的方法
2018/04/03 Javascript
vue按需加载实例详解
2019/09/06 Javascript
layer.open回调获取弹出层参数的实现方法
2019/09/10 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
2020/04/06 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
2020/05/19 jQuery
JSON获取属性值方法代码实例
2020/06/30 Javascript
[04:49]2014DOTA2国际邀请赛 Newbee顺利挺进总决赛 ImbaTV独家专访
2014/07/19 DOTA
在Python程序中操作MySQL的基本方法
2015/07/29 Python
代码实例讲解python3的编码问题
2019/07/08 Python
pytorch使用指定GPU训练的实例
2019/08/19 Python
python实现一个函数版的名片管理系统过程解析
2019/08/27 Python
PyTorch和Keras计算模型参数的例子
2020/01/02 Python
python GUI库图形界面开发之PyQt5中QMainWindow, QWidget以及QDialog的区别和选择
2020/02/26 Python
Python Tornado之跨域请求与Options请求方式
2020/03/28 Python
浅谈Python中re.match()和re.search()的使用及区别
2020/04/14 Python
德国购买踏板车网站:Microscooter
2019/10/14 全球购物
校园学雷锋广播稿
2014/10/08 职场文书
干部作风建设工作总结
2014/10/29 职场文书
2014学生会工作总结报告
2014/12/02 职场文书
青年岗位能手事迹材料
2014/12/23 职场文书
委托书英文
2015/01/28 职场文书
新党员入党决心书
2015/09/22 职场文书
家长必看:义务教育,不得以面试 评测等名义选拔学生
2019/07/09 职场文书
一文搞懂php的垃圾回收机制
2021/06/18 PHP
Python实现位图分割的效果
2021/11/20 Python
前端框架ECharts dataset对数据可视化的高级管理
2022/12/24 Javascript