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 相关文章推荐
javascript CSS画图之基础篇
Jul 29 Javascript
jquery ajax return没有返回值的解决方法
Oct 20 Javascript
js 使FORM表单的所有元素不可编辑的示例代码
Oct 17 Javascript
javascript设置金额样式转换保留两位小数示例代码
Dec 04 Javascript
javascript函数中参数传递问题示例探讨
Jul 31 Javascript
多个jQuery版本共存的处理方案
Mar 17 Javascript
Javascript实现计算个人所得税
May 10 Javascript
JavaScript中实现Map的示例代码
Sep 09 Javascript
input点击后placeholder中的提示消息消失
Jan 15 Javascript
jQuery中text() val()和html()的区别实例详解
Jun 28 Javascript
通过扫描二维码打开app的实现代码
Nov 10 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
Oct 25 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 xml文件操作代码(一)
2009/03/20 PHP
浅谈php中的访问修饰符private、protected、public的作用范围
2016/11/20 PHP
分享别人写的一个小型js框架
2007/08/13 Javascript
IE php关于强制下载文件的代码
2008/08/23 Javascript
网页中的图片的处理方法与代码
2009/11/26 Javascript
超越Jquery_01_isPlainObject分析与重构
2010/10/20 Javascript
jQuery中使用了document和window哪些属性和方法小结
2011/09/13 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
2013/06/21 Javascript
jQuery中RadioButtonList的功能及用法实例介绍
2013/08/23 Javascript
浅谈JavaScript中的string拥有方法的原因
2015/08/28 Javascript
JavaScript如何实现在文本框(密码框)输入提示语
2015/12/25 Javascript
基于bootstrap插件实现autocomplete自动完成表单
2016/05/07 Javascript
jQuery+Pdo编写login登陆界面
2016/08/01 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
2016/11/07 Javascript
p5.js入门教程和基本形状绘制
2018/03/15 Javascript
node.js读取Excel数据(下载图片)的方法示例
2018/08/02 Javascript
React-router4路由监听的实现
2018/08/07 Javascript
微信小程序如何刷新当前界面的实现方法
2019/06/07 Javascript
小程序click-scroll组件设计
2019/06/18 Javascript
Vue Router 实现动态路由和常见问题及解决方法
2020/03/06 Javascript
关于element-ui表单中限制输入纯数字的解决方式
2020/09/08 Javascript
Python3用tkinter和PIL实现看图工具
2018/06/21 Python
python利用wx实现界面按钮和按钮监听和字体改变的方法
2019/07/17 Python
解决json中ensure_ascii=False的问题
2020/04/03 Python
keras中的卷积层&池化层的用法
2020/05/22 Python
美国折衷生活方式品牌:Robert Graham
2018/07/13 全球购物
荷兰浴室和卫浴网上商店:Badkamerxxl.nl
2020/10/06 全球购物
商务专员岗位职责
2013/11/23 职场文书
高分子材料与工程专业个人求职信
2013/12/15 职场文书
行政申诉状范文
2015/05/20 职场文书
老乡会致辞
2015/07/28 职场文书
学生病假条范文
2015/08/17 职场文书
MySQL InnoDB ReplicaSet(副本集)简单介绍
2021/04/24 MySQL
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js
python基础之模块的导入
2021/10/24 Python
vue项目中的支付功能实现(微信支付和支付宝支付)
2022/02/18 Vue.js