Vue 上传到服务器运行，样式不生效

这个项目自定义了一个 swiper 组件，在本地运行的时候，修改宽高是可以正常显示出来的

<swiper class="swiper" :loop="false" :style="{height: 'calc(300vh - 1px)'}" :options="swiperOptions" v-if="shouldUpdateSwiper" ref="refSwiper">
        <swiper-slide :style="{ height: 'calc(300vh - 1px)' }" v-for="(item, idx) in sopTestList" :key="item.paths + idx">
              <view-item :src="item.sopUrl"></view-item>
        </swiper-slide>
</swiper>

打包上传到服务器后，不管宽高设置成多少，都不生效，一点变化都没有，打开浏览器开发者工具，可以看到我自己写的样式被另外一个样式“.swiper-container”覆盖了，“.swiper-container”这个样式在当前页面是没有配置的，是这个组件的配置的一个默认样式。

image.png

我们只需要在当前页面，重写一下“.swiper-container”这个样式，就可以覆盖组件默认配置的样式了

<style lang="less" scoped>
     .swiper-wrapper {
        height: 'calc(300vh - 1px)';
     }
     .swiper-container {
        height: 2200px !important;
        width: 100% !important;
        margin-left: auto;
        margin-right: auto;
     }
</style>

为什么打包后样式优先显示顺序变了，这个我也不是很清楚，有知道的同学欢迎在评论区告诉我，谢谢。