diff --git a/docs/examples-docs/zh-CN/quickstart.md b/docs/examples-docs/zh-CN/quickstart.md index 6cdfd63f0..f984efe79 100644 --- a/docs/examples-docs/zh-CN/quickstart.md +++ b/docs/examples-docs/zh-CN/quickstart.md @@ -59,27 +59,6 @@ Vue.use(Vant); ``` -### 自定义主题 - -`Vant`提供了一套默认主题,CSS 命名采用 BEM 的风格,方便使用者覆盖样式。如果你想完全替换主题色或者部分样式,可以使用下面的方法: - -#### 下载主题 - -可以通过 Github 或 npm 来下载主题: - -```bash -# npm -npm i vant-css -D - -# github -git clone git@github.com:youzan/vant.git -cd packages/vant-css -``` - -#### 修改主题 - -修改你下载主题对应的样式即可,然后引入你修改后的主题。 - ### vue-cli 模板 可以使用`vue-cli`来初始化`Vant`的通用模板: diff --git a/docs/examples-docs/zh-CN/theme.md b/docs/examples-docs/zh-CN/theme.md new file mode 100644 index 000000000..cc6a3340a --- /dev/null +++ b/docs/examples-docs/zh-CN/theme.md @@ -0,0 +1,55 @@ +### 定制主题 + +`Vant`提供了一套默认主题,CSS 命名采用 BEM 的风格,方便使用者覆盖样式。如果你想完全替换主题色或者其他样式,可以使用下面的方法: + +### 方案一. PostCSS 插件 +在项目中直接引入组件对应的 postcss 源代码,并通过 postcss 插件 [postcss-theme-variables](https://www.npmjs.com/package/postcss-theme-variables) 替换颜色变量,步骤如下: + +```javascript +// 引入基础样式 +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 插件,并根据项目需求配置颜色变量,所有可用的颜色变量请参考 [配置文件](https://github.com/youzan/vant/blob/dev/packages/vant-css/src/common/var.css) + +```javascript +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 的方式生成所需的主题 + +```bash +# 克隆仓库 +git clone git@github.com:youzan/vant.git +cd packages/vant-css +``` + +在本地 vant-css 仓库中,修改 src/common/var.css 中的颜色变量,然后执行以下构建命令,即可生成对应的样式文件 +```bash +npm run build +``` + diff --git a/docs/src/doc.config.js b/docs/src/doc.config.js index 9acf2c547..f7f81e9d3 100644 --- a/docs/src/doc.config.js +++ b/docs/src/doc.config.js @@ -35,6 +35,11 @@ module.exports = { title: '更新日志', noExample: true }, + { + path: '/theme', + title: '定制主题', + noExample: true + }, { path: '/demo', title: '示例页面',