From 5e9bf9fdc0224177db94e0ca584f824f9d2fdc80 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Sat, 25 Apr 2020 18:55:29 +0800
Subject: [PATCH] :book: upgrade less-loader@6 usage

---
 docs/react/customize-theme.en-US.md | 33 +++++++++++++++++------------
 docs/react/customize-theme.zh-CN.md | 31 +++++++++++++++------------
 2 files changed, 37 insertions(+), 27 deletions(-)

diff --git a/docs/react/customize-theme.en-US.md b/docs/react/customize-theme.en-US.md
index 5c0ef52188..a0763b197d 100644
--- a/docs/react/customize-theme.en-US.md
+++ b/docs/react/customize-theme.en-US.md
@@ -51,14 +51,14 @@ module.exports = {
     }, {
       loader: 'less-loader', // compiles Less to CSS
 +     options: {
-+       modifyVars: {
-+         'primary-color': '#1DA57A',
-+         'link-color': '#1DA57A',
-+         'border-radius-base': '2px',
-+         // or
-+         'hack': `true; @import "your-less-file-path.less";`, // Override with less file
++       lessOptions: {
++         modifyVars: {
++           'primary-color': '#1DA57A',
++           'link-color': '#1DA57A',
++           'border-radius-base': '2px',
++         },
++         javascriptEnabled: true,
 +       },
-+       javascriptEnabled: true,
 +     },
     }],
     // ...other rules
@@ -67,7 +67,10 @@ module.exports = {
 }
 ```
 
-Note that do not exclude antd package in node_modules when using less-loader.
+Note:
+
+1. Don't exclude `node_modules/antd` when using less-loader.
+2. `lessOptions` usage is supported at [less-loader@6.0.0](https://github.com/webpack-contrib/less-loader/releases/tag/v6.0.0).
 
 ### Customize in Umi
 
@@ -195,16 +198,17 @@ module.exports = {
     }, {
       loader: 'less-loader', // compiles Less to CSS
 +     options: {
-+       modifyVars: getThemeVariables({
-+         dark: true, // enable dark mode
-+         compact: true, // enable compact mode
-+       }),
-+       javascriptEnabled: true,
++       lessOptions: {
++         modifyVars: getThemeVariables({
++           dark: true, // 开启暗黑模式
++           compact: true, // 开启紧凑模式
++         }),
++         javascriptEnabled: true,
++       },
 +     },
     }],
   }],
 };
-```
 
 ## Related Articles
 
@@ -213,3 +217,4 @@ module.exports = {
 - [Theming Ant Design with Sass and Webpack](https://gist.github.com/Kruemelkatze/057f01b8e15216ae707dc7e6c9061ef7)
 - [Using Sass/Scss with React App (create-react-app)](https://medium.com/@mzohaib.qc/using-sass-scss-with-react-app-create-react-app-d03072083ef8)
 - [Dynamic Theming in Browser using Ant Design](https://medium.com/@mzohaib.qc/ant-design-dynamic-runtime-theme-1f9a1a030ba0)
+```
diff --git a/docs/react/customize-theme.zh-CN.md b/docs/react/customize-theme.zh-CN.md
index 9d2c47d0a3..7a97c21322 100644
--- a/docs/react/customize-theme.zh-CN.md
+++ b/docs/react/customize-theme.zh-CN.md
@@ -51,14 +51,14 @@ module.exports = {
     }, {
       loader: 'less-loader', // compiles Less to CSS
 +     options: {
-+       modifyVars: {
-+         'primary-color': '#1DA57A',
-+         'link-color': '#1DA57A',
-+         'border-radius-base': '2px',
-+         // or
-+         'hack': `true; @import "your-less-file-path.less";`, // Override with less file
++       lessOptions: {
++         modifyVars: {
++           'primary-color': '#1DA57A',
++           'link-color': '#1DA57A',
++           'border-radius-base': '2px',
++         },
++         javascriptEnabled: true,
 +       },
-+       javascriptEnabled: true,
 +     },
     }],
     // ...other rules
@@ -67,7 +67,10 @@ module.exports = {
 }
 ```
 
-注意 less-loader 的处理范围不要过滤掉 `node_modules` 下的 antd 包。
+注意：
+
+1. less-loader 的处理范围不要过滤掉 `node_modules` 下的 antd 包。
+2. `lessOptions` 的配置写法在 [less-loader@6.0.0](https://github.com/webpack-contrib/less-loader/releases/tag/v6.0.0) 里支持。
 
 ### 在 Umi 里配置主题
 
@@ -173,11 +176,13 @@ module.exports = {
     }, {
       loader: 'less-loader', // compiles Less to CSS
 +     options: {
-+       modifyVars: getThemeVariables({
-+         dark: true, // 开启暗黑模式
-+         compact: true, // 开启紧凑模式
-+       }),
-+       javascriptEnabled: true,
++       lessOptions: {
++         modifyVars: getThemeVariables({
++           dark: true, // 开启暗黑模式
++           compact: true, // 开启紧凑模式
++         }),
++         javascriptEnabled: true,
++       },
 +     },
     }],
   }],