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 相关文章推荐
找出字符串中出现次数最多的字母和出现次数精简版
Nov 07 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
Mar 05 Javascript
Webpack中css-loader和less-loader的使用教程
Apr 27 Javascript
深入理解react-router@4.0 使用和源码解析
May 23 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
May 18 Javascript
vue-router中的hash和history两种模式的区别
Jul 17 Javascript
详解SPA中前端路由基本原理与实现方式
Sep 12 Javascript
Vue中CSS动画原理的实现
Feb 13 Javascript
Vue.js实现tab切换效果
Jul 24 Javascript
解决layui动态加载复选框无法选中的问题
Sep 20 Javascript
详解Angular cli配置过程记录
Nov 07 Javascript
vue-router 2.0 跳转之router.push()用法说明
Aug 12 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 新手入门
thinkphp验证码显示不出来的解决方法
2014/03/29 PHP
Yii Framework框架获取分类下面的所有子类方法
2014/06/20 PHP
PHP简单实现记录网站访问量功能示例
2018/06/06 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
JavaScript 在线压缩和格式化收藏
2009/01/16 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
2013/06/05 Javascript
js图片向右一张张滚动效果实例代码
2013/11/23 Javascript
js复制网页内容并兼容各主流浏览器的代码
2013/12/17 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
2014/01/13 Javascript
JS防止网页被嵌入iframe框架的方法分析
2016/09/13 Javascript
bootstrap table表格插件使用详解
2017/05/08 Javascript
详解vue-router数据加载与缓存使用总结
2018/10/29 Javascript
Angular8路由守卫原理和使用方法
2019/08/29 Javascript
Vue-cli3多页面配置详解
2020/03/22 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
2020/11/12 Javascript
使用js原生实现年份轮播选择效果实例
2021/01/12 Javascript
Python程序设计入门(1)基本语法简介
2014/06/13 Python
Python安装第三方库的3种方法
2015/06/21 Python
Python的argparse库使用详解
2018/10/09 Python
自定义Django Form中choicefield下拉菜单选取数据库内容实例
2020/03/13 Python
Django models filter筛选条件详解
2020/03/16 Python
Python Tricks 使用 pywinrm 远程控制 Windows 主机的方法
2020/07/21 Python
Python利用imshow制作自定义渐变填充柱状图(colorbar)
2020/12/10 Python
CSS3 input框的实现代码类似Google登录的动画效果
2020/08/04 HTML / CSS
GANT英国官方网上商店:甘特衬衫
2018/02/06 全球购物
德国高端单身人士交友网站:ElitePartner
2018/12/02 全球购物
英国领先的互联网葡萄酒礼品商:Vintage Wine & Port
2019/05/24 全球购物
你的创业计划书怎样才能打动风投
2014/02/06 职场文书
善意的谎言事例
2014/02/15 职场文书
大学毕业生个人自荐书
2014/07/02 职场文书
教师工作自我鉴定范文
2014/09/14 职场文书
教师学习三严三实心得体会
2014/10/13 职场文书
三方合作意向书范本
2015/05/09 职场文书
MySQL 5.7常见数据类型
2021/07/15 MySQL
数据设计之权限的实现
2022/08/05 MySQL