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 相关文章推荐
jquery checkbox全选、取消全选实现代码
Mar 05 Javascript
jQuery之排序组件的深入解析
Jun 19 Javascript
javascript学习笔记(二)数组和对象部分
Sep 30 Javascript
JavaScript获得页面base标签中url的方法
Apr 03 Javascript
JavaScript数组迭代器实例分析
Jun 09 Javascript
JavaScript仿百度图片浏览效果
Nov 23 Javascript
基于JavaScript实现移动端无限加载分页
Mar 27 Javascript
react 实现页面代码分割、按需加载的方法
Apr 03 Javascript
微信小程序实现上传图片功能
May 28 Javascript
element-ui 表格数据时间格式化的方法
Aug 24 Javascript
Vue项目环境搭建详细总结
Sep 26 Javascript
封装一下vue中的axios示例代码详解
Feb 16 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 MVC框架路由学习笔记
2016/03/02 PHP
深入浅析PHP无限极分类的案例教程
2016/05/09 PHP
ThinkPHP5实现作业管理系统中处理学生未交作业与已交作业信息的方法
2016/11/12 PHP
JavaScript 原型链学习总结
2010/10/29 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
2013/08/18 Javascript
用js通过url传参把数据从一个页面传到另一个页面
2014/09/01 Javascript
简述JavaScript的正则表达式中test()方法的使用
2015/06/16 Javascript
javascript编写贪吃蛇游戏
2015/07/07 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
2017/02/07 Javascript
详解vue mint-ui源码解析之loadmore组件
2017/10/11 Javascript
js面向对象之实现淘宝放大镜
2020/01/15 Javascript
JS实现可视化音频效果的实例代码
2020/01/16 Javascript
JS面试题中深拷贝的实现讲解
2020/05/07 Javascript
vue+koa2搭建mock数据环境的详细教程
2020/05/18 Javascript
python动态加载变量示例分享
2014/02/17 Python
python学习笔记:字典的使用示例详解
2014/06/13 Python
python操作 hbase 数据的方法
2016/12/18 Python
pygame游戏之旅 python和pygame安装教程
2018/11/20 Python
python 读取鼠标点击坐标的实例
2018/12/29 Python
Python统计一个字符串中每个字符出现了多少次的方法【字符串转换为列表再统计】
2019/05/05 Python
解决Python3下map函数的显示问题
2019/12/04 Python
python中upper是做什么用的
2020/07/20 Python
Flask中sqlalchemy模块的实例用法
2020/08/02 Python
利用python为PostgreSQL的表自动添加分区
2021/01/18 Python
HTML5 Canvas中使用用路径描画圆弧
2015/01/01 HTML / CSS
美体小铺英国官网:The Body Shop英国
2017/01/24 全球购物
爱尔兰灯和灯具网上商店:Lights.ie
2018/03/26 全球购物
IGK Hair官网:喷雾、洗发水、护发素等
2020/11/03 全球购物
搞笑车尾标语
2014/06/23 职场文书
公司委托书格式范本
2014/09/16 职场文书
入党转正申请报告
2015/05/15 职场文书
学生会主席任命书
2015/09/21 职场文书
Nginx代理同域名前后端分离项目的完整步骤
2021/03/31 Servers
python 如何将两个实数矩阵合并为一个复数矩阵
2021/05/19 Python
golang内置函数len的小技巧
2021/07/25 Golang
Js类的构建与继承案例详解
2021/09/15 Javascript