From 52fb7628f2ddab3828cb94388c1f0ce48f8b10be Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Tue, 4 May 2021 22:07:47 +0800
Subject: [PATCH] docs: add vite theme guide (#8656)

---
 docs/markdown/theme.en-US.md | 49 ++++++++++++++++++++++++++++++++----
 docs/markdown/theme.zh-CN.md | 43 ++++++++++++++++++++++++++++++-
 2 files changed, 86 insertions(+), 6 deletions(-)

diff --git a/docs/markdown/theme.en-US.md b/docs/markdown/theme.en-US.md
index 466ade059..83db9737d 100644
--- a/docs/markdown/theme.en-US.md
+++ b/docs/markdown/theme.en-US.md
@@ -133,13 +133,13 @@ module.exports = {
           options: {
             lessOptions: {
               modifyVars: {
-                // overide with less vars
+                // override with less vars
                 'text-color': '#111',
-                'border-color': '#eee'
+                'border-color': '#eee',
                 // or override with less file
-                'hack': `true; @import "your-less-file-path.less";`
+                hack: `true; @import "your-less-file-path.less";`,
               },
-            }
+            },
           },
         },
       ],
@@ -158,7 +158,7 @@ module.exports = {
       less: {
         lessOptions: {
           modifyVars: {
-            // overide with less vars
+            // override with less vars
             'text-color': '#111',
             'border-color': '#eee',
             // or override with less file
@@ -170,3 +170,42 @@ module.exports = {
   },
 };
 ```
+
+### Vite
+
+Add the following config in `vite.config.js`.
+
+```js
+// vite.config.js
+import vue from '@vitejs/plugin-vue';
+import styleImport from 'vite-plugin-style-import';
+
+export default {
+  css: {
+    preprocessorOptions: {
+      less: {
+        javascriptEnabled: true,
+        modifyVars: {
+          'text-color': '#111',
+          'border-color': '#eee',
+        },
+      },
+    },
+  },
+  resolve: {
+    alias: [{ find: /^~/, replacement: '' }],
+  },
+  plugins: [
+    vue(),
+    styleImport({
+      libs: [
+        {
+          libraryName: 'vant',
+          esModule: true,
+          resolveStyle: (name) => `vant/es/${name}/style/less`,
+        },
+      ],
+    }),
+  ],
+};
+```
diff --git a/docs/markdown/theme.zh-CN.md b/docs/markdown/theme.zh-CN.md
index ce5d36100..eebe4b88b 100644
--- a/docs/markdown/theme.zh-CN.md
+++ b/docs/markdown/theme.zh-CN.md
@@ -93,7 +93,7 @@ Vant 使用了 [Less](http://lesscss.org/) 对样式进行预处理，并内置
 
 #### 按需引入样式（推荐）
 
-在 babel.config.js 中配置按需引入样式源文件，注意 babel6 不支持按需引入样式，请手动引入样式。
+在 babel.config.js 中配置按需引入样式源文件，注意 babel 6 不支持按需引入样式，请手动引入样式。
 
 ```js
 module.exports = {
@@ -178,3 +178,44 @@ module.exports = {
   },
 };
 ```
+
+### Vite 项目
+
+如果是 vite 项目，可以跳过以上步骤，直接在 `vite.config.js` 中添加如下配置即可。
+
+```js
+// vite.config.js
+import vue from '@vitejs/plugin-vue';
+import styleImport from 'vite-plugin-style-import';
+
+export default {
+  css: {
+    preprocessorOptions: {
+      less: {
+        javascriptEnabled: true,
+        // 覆盖样式变量
+        modifyVars: {
+          'text-color': '#111',
+          'border-color': '#eee',
+        },
+      },
+    },
+  },
+  resolve: {
+    alias: [{ find: /^~/, replacement: '' }],
+  },
+  plugins: [
+    vue(),
+    // 按需引入样式源文件
+    styleImport({
+      libs: [
+        {
+          libraryName: 'vant',
+          esModule: true,
+          resolveStyle: (name) => `vant/es/${name}/style/less`,
+        },
+      ],
+    }),
+  ],
+};
+```