如何利用webpack组件化思想修改第三方移动端组件库（mint-ui）样式

Question

在使用mint-ui的过程中，我使用到了tabbar组件，
代码如下：

<mt-tabbar v-model="selected" class="content">
  <mt-tab-item class="item" id="首页" >
    <img class="img" slot="icon" src="../../images/tab/a1.png" v-if="selected!='首页'">
    <img class="img" slot="icon" src="../../images/tab/a2.png" v-else>
    <span class="icon-name" v-if="selected!='首页'">首页</span>
    <span class="icon-name-blue" v-else>首页</span>
  </mt-tab-item>
  <mt-tab-item class="item" id="内容" >
    此处省略，与上方类似
  </mt-tab-item> 
</mt-tabbar>

在浏览器渲染如下：

可以看出浏览器多渲染出了两部分：

1. <div class="mint-tab-item-icon">即上图蓝色部分
2. <div class="mint-tab-item-label">即包裹span的div

现在问题来了，我想更改<div class="mint-tab-item-icon">的样式，因为mint-ui默认的宽高是24px，我想改成20px，在webpack中代码如下

<style lang="stylus" rel="stylesheet/stylus">
  .item
    background:#fff
    .mint-tab-item-icon
      width:20px
      height:20px
</style>

由于webpack的模块化思想，如果在上面的代码中加入scoped，即

<style lang="stylus" rel="stylesheet/stylus" scoped>
    此部分同上
</style>

则无法实现更改<div class="mint-tab-item-icon">的样式，那个各位大神，能否在使用scoped的前提下，实现更改<div class="mint-tab-item-icon">的样式。

Answer 1

把mint-ui仓库clone下来，然后按你的需要修改代码，重新构建 一份上传到私有npm库。

Answer 2

我想问一下你说的问题解决了吗？我也遇见了相同的问题！