blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-26 03:16:35 +08:00
Code Issues Projects Releases Wiki Activity

docs: update document of custom theme (#4933)

Browse Source
This commit is contained in:
neverland 2019-11-05 20:45:06 +08:00 committed by GitHub
parent ad36ddc60f
commit ca48edb8c9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
docs/markdown/theme.en-US.md
View File

@ -19,16 +19,18 @@ There are some basic variables below, all available variables could be found in
@background-color-light: #fafafa; @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. 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 ```js
// configure babel plugin in babel.config.js
// For users who use babel6, please manually import less file
module.exports = { module.exports = {
plugins: [ plugins: [
[ [
@ -45,14 +47,17 @@ module.exports = {
}; };
``` ```
manually import less file： #### Manually import style
```js ```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'; 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: 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:

24
docs/markdown/theme.zh-CN.md
View File

@ -23,17 +23,17 @@ Vant 使用了 [Less](http://lesscss.org/) 对样式进行预处理，并内置
@background-color-light: #fafafa; @background-color-light: #fafafa;
``` ```
### 定制方法 ## 定制方法
定制主题分为两步：引入样式源文件和修改样式变量 ### 步骤一. 引入样式源文件
#### 步骤一. 引入样式源文件 定制主题时，需要引入组件对应的 Less 样式文件，支持按需引入和手动引入两种方式。
Vant 支持通过 babel 插件按需引入和手动引入两种方式，推荐使用按需引入的方式。 #### 按需引入样式（推荐）
在 babel.config.js 中配置按需引入样式源文件，注意 babel6 不支持按需引入样式，请手动引入样式
```js ```js
// 在 babel.config.js 中配置按需引入样式源文件
// 注意：babel6 不支持按需引入样式，请手动引入
module.exports = { module.exports = {
plugins: [ plugins: [
[ [
@ -50,17 +50,19 @@ module.exports = {
}; };
``` ```
下面是手动引入的方法： #### 手动引入样式
```js ```js
// 手动引入组件的样式源文件 // 引入全部样式
import Button from 'vant/lib/button'; import 'vant/lib/index.less';
// 引入单个组件样式
import 'vant/lib/button/style/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 ```js
// webpack.config.js // webpack.config.js