打包后样式和本地样式不一致

问题

使用 vxe-table 中的 size 属性，缩小表格行高后，本地样式生效，但是打包后线上样式没有生效。

分析

网上查了很多资料：

• 有的说是 main.js 中样式层叠错误，解决办法是把样式文件引入放在 App 和 router 引入之前。

• 有的说是应该把自定义样式放在 scoped 中，并且注意要放在该组件的最顶级类名之下。

• 有的说需要调整样式文件引入顺序，并利用 webpack 某插件进行打包设置。

以上方法经测试都无效。

仔细对比线上和本地同一元素的样式后发现：线上会把修改的样式放在 401-page.xxx.css 中，而不是 app.xxx.css 。

本地样式

---

线上样式

解决

方案一：不使用 vxe-table 中的 size 属性，而是在各组件的 scoped 中根据类名自定义行高。--此方案较繁琐。

方案二：在 vxe-table 的全局样式中，根据 size--mini 类名定义行高。 --此方案较为简洁。

代码截图如下：

如此，打包后样式就能生效了：