Vue修改组件样式问题

问题:

    Vue修改第三方组件样式后运行没问题,npm run build打包后运行样式没有变化

原因:(本人以及学长研究总结)

    vue项目打包后生成的style文件是压缩后的,样式都混在一起,你写的样式被覆盖了

解决:

    在父组件标签加个classname,与原iview的样式区分开

例子:修改iview中的input样式

修改方案:

给Input的父级标签加个class=“teshuInput”---teshuInput是我起的一个classname

<style>
  .teshuInput .ivu-input,.teshuInput .ivu-input-large{
    height: 50px;
    font-size: 20px;
  }
  .teshuBtn .ivu-btn{
    font-size: 25px;
    width: 200px;
    height: 45px;
  }
</style>

猜你喜欢

转载自blog.csdn.net/xuzailin/article/details/79821358