Vant 样式覆盖问题及解决方法

项目需要覆盖 Vant 的样式

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

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

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

vite.config.ts

styleImport({
  libs: [
    {
      libraryName: 'vant',
      esModule: true,
      resolveStyle: name => `vant/es/${name}/style`
    }
  ]
}),

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

import 'vant/lib/index.css';