[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;
        }
    }
}

[yanbowe]

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

// 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;
        }
    }
}

这样太麻烦了吧，全部引入样式体积不会大很多，这样的话也不用额外单独导入toast，dialog等样式了

[yoyo837]

此问题彻底解决前, 建议样式css静态全局引入, js 按需加载时关闭样式.

[Deeyu]

有好的解决方案吗？search组件今天也碰到这个问题了，刷新页面css加载顺序就不对了

[Kareshii]

今天也碰到这个问题了，什么时候才能修复，排查了半天。。

[yngzhh]

来自2024年，4x版本dialog组件也是加载样式顺序有问题。我是本地调试无问题，但是打包静态文件后dialog样式错乱