diff --git a/docs/markdown/theme.en-US.md b/docs/markdown/theme.en-US.md index a2289b4f4..dfeeae732 100644 --- a/docs/markdown/theme.en-US.md +++ b/docs/markdown/theme.en-US.md @@ -19,16 +19,18 @@ There are some basic variables below, all available variables could be found in @background-color-light: #fafafa; ``` -### How to custom theme +## How to custom theme -#### Step 1: import less file +### Step 1: import less file First you should import the less source file to your project. you can use babel-plugin-import to automatically import or just manually import less file. +#### Automatically import style + +Configure babel plugin in babel.config.js, if you are using babel6, please manually import less file. + ```js -// configure babel plugin in babel.config.js -// For users who use babel6, please manually import less file module.exports = { plugins: [ [ @@ -45,14 +47,17 @@ module.exports = { }; ``` -manually import less file: +#### Manually import style ```js -import Button from 'vant/lib/button'; +// import all styles +import 'vant/lib/index.less'; + +// import style of single component import 'vant/lib/button/style/less'; ``` -#### Step 2: modify less variables +### Step 2: modify less variables Use [modifyVars](http://lesscss.org/usage/#using-less-in-the-browser-modify-variables) provided by less.js to modify less variables,webpack config for reference: diff --git a/docs/markdown/theme.zh-CN.md b/docs/markdown/theme.zh-CN.md index 1de76e67c..0cf53fd5a 100644 --- a/docs/markdown/theme.zh-CN.md +++ b/docs/markdown/theme.zh-CN.md @@ -23,17 +23,17 @@ Vant 使用了 [Less](http://lesscss.org/) 对样式进行预处理,并内置 @background-color-light: #fafafa; ``` -### 定制方法 +## 定制方法 -定制主题分为两步:引入样式源文件和修改样式变量 +### 步骤一. 引入样式源文件 -#### 步骤一. 引入样式源文件 +定制主题时,需要引入组件对应的 Less 样式文件,支持按需引入和手动引入两种方式。 -Vant 支持通过 babel 插件按需引入和手动引入两种方式,推荐使用按需引入的方式。 +#### 按需引入样式(推荐) + +在 babel.config.js 中配置按需引入样式源文件,注意 babel6 不支持按需引入样式,请手动引入样式 ```js -// 在 babel.config.js 中配置按需引入样式源文件 -// 注意:babel6 不支持按需引入样式,请手动引入 module.exports = { plugins: [ [ @@ -50,17 +50,19 @@ module.exports = { }; ``` -下面是手动引入的方法: +#### 手动引入样式 ```js -// 手动引入组件的样式源文件 -import Button from 'vant/lib/button'; +// 引入全部样式 +import 'vant/lib/index.less'; + +// 引入单个组件样式 import 'vant/lib/button/style/less'; ``` -#### 步骤二. 修改样式变量 +### 步骤二. 修改样式变量 -使用 less 提供的 [modifyVars](http://lesscss.org/usage/#using-less-in-the-browser-modify-variables) 即可对变量进行修改,下面是参考的 webpack 配置。 +使用 Less 提供的 [modifyVars](http://lesscss.org/usage/#using-less-in-the-browser-modify-variables) 即可对变量进行修改,下面是参考的 webpack 配置。 ```js // webpack.config.js