mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs(theme): add guide of override with less file (#4282)
This commit is contained in:
parent
3264825f77
commit
009ad60872
@ -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)。
|
||||
|
||||
```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";`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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";`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user