docs: update document of custom theme (#4933)

This commit is contained in:
neverland
2019-11-05 20:45:06 +08:00
committed by GitHub
parent ad36ddc60f
commit ca48edb8c9
2 changed files with 25 additions and 18 deletions
+12 -7
View File
@@ -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 variableswebpack config for reference: