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

youzan · Aug 29, 2019 · 009ad60 · 009ad60
1 parent 3264825
commit 009ad60
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 39 deletions.
diff --git a/docs/markdown/theme.en-US.md b/docs/markdown/theme.en-US.md
@@ -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";`
             }
           }
         }

diff --git a/docs/markdown/theme.zh-CN.md b/docs/markdown/theme.zh-CN.md
@@ -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";`
             }
           }
         }