docs(theme): add guide of override with less file (#4282)

This commit is contained in:
neverland 2019-08-29 16:51:32 +08:00 committed by GitHub
parent 3264825f77
commit 009ad60872
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 39 deletions

View File

@ -11,21 +11,7 @@ Vant use [Less](http://lesscss.org/) as css preprocessoryou can modify less v
There are some basic variables below, all available variables could be found in [var.less](https://github.com/youzan/vant/blob/dev/src/style/var.less)。
```less
// color variables
@black: #000;
@white: #fff;
@red: #f44;
@blue: #1989fa;
@orange: #ff976a;
@orange-dark: #ed6a0c;
@orange-light: #fffbe8;
@green: #07c160;
@gray: #c9c9c9;
@gray-light: #e5e5e5;
@gray-darker: #7d7e80;
@gray-dark: #969799;
// default colors
// Component Colors
@text-color: #323233;
@border-color: #ebedf0;
@active-color: #f2f3f5;
@ -82,10 +68,11 @@ module.exports = {
loader: 'less-loader',
options: {
modifyVars: {
red: '#03a9f4',
blue: '#3eaf7c',
orange: '#f08d49',
'text-color': '#111'
// overide with less vars
'text-color': '#111',
'border-color': '#eee'
// or override with less file
'hack': `true; @import "your-less-file-path.less";`
}
}
}

View File

@ -15,21 +15,7 @@ Vant 使用了 [Less](http://lesscss.org/) 对样式进行预处理,并内置
下面是一些基本的样式变量,所有可用的颜色变量请参考 [配置文件](https://github.com/youzan/vant/blob/dev/src/style/var.less)。
```less
// color variables
@black: #000;
@white: #fff;
@red: #f44;
@blue: #1989fa;
@orange: #ff976a;
@orange-dark: #ed6a0c;
@orange-light: #fffbe8;
@green: #07c160;
@gray: #c9c9c9;
@gray-light: #e5e5e5;
@gray-darker: #7d7e80;
@gray-dark: #969799;
// default colors
// Component Colors
@text-color: #323233;
@border-color: #ebedf0;
@active-color: #f2f3f5;
@ -83,15 +69,16 @@ module.exports = {
{
test: /\.less$/,
use: [
// ...other loaders
// ...其他 loader 配置
{
loader: 'less-loader',
options: {
modifyVars: {
red: '#03a9f4',
blue: '#3eaf7c',
orange: '#f08d49',
'text-color': '#111'
// 直接覆盖变量
'text-color': '#111',
'border-color': '#eee'
// 或者可以通过 less 文件覆盖(文件路径为绝对路径)
'hack': `true; @import "your-less-file-path.less";`
}
}
}