介绍
Vant 提供了一套默认主题,CSS 命名采用 BEM 的风格,方便使用者覆盖样式。如果你想完全替换主题色或者其他样式,可以按照本文档进行主题定制。
示例工程
我们提供了一个基于 Vue Cli 3 的示例工程,仓库地址为
,其中包含了定制主题的基本配置,可以作为参考。
样式变量
Vant 使用了
对样式进行预处理,并内置了一些样式变量,通过替换样式变量即可定制你自己需要的主题。
下面是所有的基础样式变量,组件的颜色变量请参考各个组件的文档或
。
定制方法
步骤一 引入样式源文件
定制主题时,需要引入组件对应的 Less 样式文件,支持按需引入和手动引入两种方式。
按需引入样式(推荐)
在 babel.config.js 中配置按需引入样式源文件,注意 babel6 不支持按需引入样式,请手动引入样式。
手动引入样式
步骤二 修改样式变量
使用 Less 提供的
即可对变量进行修改,下面是参考的 webpack 配置。
如果 vue-cli 搭建的项目,可以在 `vue.config.js` 中进行配置。