mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
46ab59930e
* fix: Tabbar icon line-height * [new feature] progress add showPivot prop * [new feature] TabItem support vue-router * [new feature] update document header style * [Doc] add toast english ducoment * [bugfix] Search box-sizing wrong * [Doc] update vant-demo respo
1.6 KiB
1.6 KiB
Custom Theme (In translation)
Vant provides a set of default themes, if you want to custom the theme color or other styles, you can use the following methods:
方案一. PostCSS 插件
在项目中直接引入组件对应的 postcss 源代码，并通过 postcss 插件 postcss-theme-variables 替换颜色变量，步骤如下：
// 引入基础样式
import 'vant/packages/vant-css/src/base.css';
// 引入组价对应的样式
import 'vant/packages/vant-css/src/button.css';
import 'vant/packages/vant-css/src/checkbox.css';
接着在 postcss.config.js 中引入所需的 postcss 插件，并根据项目需求配置颜色变量，所有可用的颜色变量请参考 配置文件
module.exports = {
plugins: [
require('postcss-easy-import')({
extensions: ['pcss', 'css']
}),
require('postcss-theme-variables')({
vars: {
red: '#F60',
gray: '#CCC',
blue: '#03A9F4'
},
prefix: '$'
}),
require('precss')(),
require('postcss-calc')(),
require('autoprefixer')({
browsers: ['Android >= 4.0', 'iOS >= 7']
})
]
};
方案二. 本地构建
可以通过在本地构建 vant-css 的方式生成所需的主题
# 克隆仓库
git clone git@github.com:youzan/vant.git
cd packages/vant-css
在本地 vant-css 仓库中，修改 src/common/var.css 中的颜色变量，然后执行以下构建命令，即可生成对应的样式文件
npm run build