blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-25 02:41:46 +08:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,21 +11,7 @@ Vant use [Less](http://lesscss.org/) as css preprocessor，you 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)。 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 ```less
// color variables // Component Colors
@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
@text-color: #323233; @text-color: #323233;
@border-color: #ebedf0; @border-color: #ebedf0;
@active-color: #f2f3f5; @active-color: #f2f3f5;
@ -82,10 +68,11 @@ module.exports = {
loader: 'less-loader', loader: 'less-loader',
options: { options: {
modifyVars: { modifyVars: {
red: '#03a9f4', // overide with less vars
blue: '#3eaf7c', 'text-color': '#111',
orange: '#f08d49', 'border-color': '#eee'
'text-color': '#111' // or override with less file
'hack': `true; @import "your-less-file-path.less";`
} }
} }
} }

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

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