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 相关文章推荐
关于 byval 与 byref 的区别分析总结
Oct 08 Javascript
Javascript 判断函数类型完美解决方案
Sep 02 Javascript
js判断页面中是否有指定控件的简单实例
Mar 04 Javascript
用JS在浏览器中创建下载文件
Mar 05 Javascript
JS逆序遍历实现代码
Dec 02 Javascript
JavaScript 实现打印,打印预览,打印设置
Dec 30 Javascript
AngularJS学习笔记之依赖注入详解
May 16 Javascript
浅谈如何实现easyui的datebox格式化
Jun 12 Javascript
JS实现AES加密并与PHP互通的方法分析
Apr 19 Javascript
利用node.js制作命令行工具方法教程(一)
Jun 22 Javascript
javascript中call,apply,callee,caller用法实例分析
Jul 24 Javascript
微信小程序新闻网站详情页实例代码
Jan 10 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
咖啡磨器 如何选购一台适合家用的意式磨豆机
2021/03/05 新手入门
PHP Memcached + APC + 文件缓存封装实现代码
2010/03/11 PHP
CI框架中通过hook的方式实现简单的权限控制
2015/01/07 PHP
浅析PHP中Session可能会引起并发问题
2015/07/23 PHP
PHP读取文本文件并逐行输出该行使用最多的字符与对应次数的方法
2016/11/25 PHP
PHP机器学习库php-ml的简单测试和使用方法
2017/07/14 PHP
Laravel框架实现定时Task Scheduling例子
2019/10/22 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
javascript 的Document属性和方法集合
2010/01/25 Javascript
js Event对象的5种坐标
2011/09/12 Javascript
js中Image对象以及对其预加载处理示例
2013/11/20 Javascript
jQuery检测输入的字符串包含的中英文的数量
2015/04/17 Javascript
JavaScript的jQuery库中function的存在和参数问题
2015/08/13 Javascript
基于javascript实现图片左右切换效果
2016/01/25 Javascript
JS原型链怎么理解
2016/06/27 Javascript
JQuery中Ajax的操作完整例子
2017/03/07 Javascript
nodeJs的安装与npm全局环境变量的配置详解
2020/01/06 NodeJs
JS实现可以用键盘方向键控制的动画
2020/12/11 Javascript
python3.0 字典key排序
2008/12/24 Python
详解python里的命名规范
2018/07/16 Python
Python简单过滤字母和数字的方法小结
2019/01/09 Python
树莓派与PC端在局域网内运用python实现即时通讯
2019/06/22 Python
Django如何批量创建Model
2020/09/01 Python
Html5 canvas实现粒子时钟的示例代码
2018/09/06 HTML / CSS
英国最大的在线照明商店:Litecraft
2020/08/31 全球购物
品恩科技软件测试面试题
2014/10/26 面试题
装潢设计实习自我鉴定
2013/09/19 职场文书
好学生评语大全
2014/05/05 职场文书
投资建议书模板
2014/05/12 职场文书
学习礼仪心得体会
2014/09/01 职场文书
财务助理岗位职责范本
2014/10/09 职场文书
2015年元旦文艺晚会总结(学院)
2014/11/28 职场文书
2015年基层党支部工作总结
2015/05/21 职场文书
电影圆明园观后感
2015/06/03 职场文书
办公室日常管理制度
2015/08/04 职场文书
深入理解mysql事务隔离级别和存储引擎
2022/04/12 MySQL