[Bug] VantResolver 自动导入打包后会导致css加载顺序错误

[yanbowe]

1.当Button组件和ActionBar和组件一起使用后本地运行正常，打包后ActionBar样式顺序错乱，与本地开发不一致。 线上： 本地：

2.Toast无法正确加载css样式

复现Demo：https://github.com/yanbowe/vite-vant-demo
复现步骤：
1.pnpm安装依赖
2.pnpm dev本地运行查看效果
3.pnpm build & pnpm preview查看效果

[yanbowe]

ActionBar组件的样式被button组件的样式给覆盖掉了，vite打包过后head中的link标签顺序有问题

[wangdongwu]

解决没有

[yanbowe]

解决没有

没有, 不过找到个解决方案就是在app.vue里使用一个空的van-button组件

[Soya-xy]

解决没有

没有, 不过找到个解决方案就是在app.vue里使用一个空的van-button组件

可能还需要全局引入他的 css 文件

[yoyo837]

没人来修复吗？

[yoyo837]

解决没有

没有, 不过找到个解决方案就是在app.vue里使用一个空的van-button组件

可能还需要全局引入他的 css 文件

这样VantResolver不就和没用一样了么，先换babel-plugin-import顶一会儿吧。

[iamKyun]

有什么解决办法吗？

[sir-ran]

同样遇到这个问题了。

[runlong-yao]

按需引入的样式一定在自定义样式之后，能快速想到的解决办法就是加!important。因为我也没找到能保证加载所有样式之后的方法

[yanbowe]

贴一下我的解决办法 ，按需导入时不导入样式，手动加载全部样式

// vite.config.ts
VantResolver({
     importStyle: false
})
// main.ts
import 'vant/lib/index.css';

[runlong-yao]

贴一下我的解决办法 ，按需导入时不导入样式，手动加载全部样式

// vite.config.ts
VantResolver({
     importStyle: false
})
// main.ts
import 'vant/lib/index.css';

有个新方法，用scss或less
在需要覆盖的样式外层加一个body，提升一下样式优先级，可以覆盖按需加入的组件样式，并且按需打包

body{
    .ant-tabs-nav.ant-tabs-nav{
        &::before{
            display: none;
        }
    }
}