unplugin / unplugin-vue-components

📲 On-demand components auto importing for Vue

Home Page:https://www.npmjs.com/package/unplugin-vue-components

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

yanbowe opened this issue · comments

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

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

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

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

解决没有

解决没有

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

commented

解决没有

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

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

commented

没人来修复吗?

commented

解决没有

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

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

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

commented

有什么解决办法吗?

同样遇到这个问题了。

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

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

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

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

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

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

// 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等样式了

commented

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

commented

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

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