0%

Vant 样式覆盖

项目需要覆盖 Vant 的样式

https://vant-contrib.gitee.io/vant/#/zh-CN/config-provider

按照官方文档,我自己新建了一个 vant.scss,内容如下

1
2
3
4
5
6
/* 添加这段样式后,Primary Button 会变成红色 */
:root {
--van-dayun: #378d93;
--van-primary-color: var(--van-dayun);
--van-border-radius-sm: 6px;
}

单身样式没有生效,查了一下,发现是我用了按需导入,优先级比上面的 vant.scss 高一些

vite.config.ts

1
2
3
4
5
6
7
8
9
styleImport({
libs: [
{
libraryName: 'vant',
esModule: true,
resolveStyle: name => `vant/es/${name}/style`
}
]
}),

屏蔽掉上面的代码,全局导入样式就可以了

1
import 'vant/lib/index.css';