docs: update on demand import docs (#1672)

website/docs/en-US/quickstart.md

@@ -35,6 +35,8 @@ The above imports Element Plus entirely. Note that CSS file needs to be imported
 
 #### On demand
 
+**Vue CLI**
+
 With the help of [babel-plugin-import](https://github.com/ant-design/babel-plugin-import), we can import components we actually need, making the project smaller than otherwise.
 
 Firstly，install babel-plugin-import:
@@ -52,6 +54,31 @@ $ yarn add babel-plugin-import -D
 
 Then edit babel.config.js:
 
+- import `.scss` style
+
+:::warning
+Please make sure that `sass` and `sass-loader` dependencies have been installed and import `element-plus/packages/theme-chalk/src/base.scss` in the entry file.
+:::
+
+```js
+module.exports = {
+  plugins: [
+    [
+      "import",
+      {
+        libraryName: 'element-plus',
+        customStyleName: (name) => {
+          name = name.slice(3)
+          return `element-plus/packages/theme-chalk/src/${name}.scss`;
+        },
+      },
+   ],
+  ],
+};
+```
+
+- import `.css` style
+
 ```js
 module.exports = {
   plugins: [
@@ -60,8 +87,6 @@ module.exports = {
       {
         libraryName: 'element-plus',
         customStyleName: (name) => {
-          // Because of the existence of `customStyleName`, `style: true` will not be effective.
-          // So if you want to use the `.scss` source file, you only need to replace the extension name from `.css` to `.scss`
           return `element-plus/lib/theme-chalk/${name}.css`;
         },
       },
@@ -70,12 +95,87 @@ module.exports = {
 };
 ```
 
+**Vite**
+
+Firstly，install [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import):
+
+```bash
+$ npm install vite-plugin-style-import -D
+```
+
+or if you use Yarn as package manager
+
+```bash
+$ yarn add vite-plugin-style-import -D
+```
+
+Then edit vite.config.js:
+
+- import `.scss` style
+  
+:::warning
+Please make sure that the `sass` dependency have been installed and import `element-plus/packages/theme-chalk/src/base.scss` in the entry file.
+:::
+
+```js
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import styleImport from 'vite-plugin-style-import'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    styleImport({
+      libs: [{
+        libraryName: 'element-plus',
+        resolveStyle: (name) => {
+          name = name.splice(3)
+          return `element-plus/packages/theme-chalk/src/${name}.scss`;
+        },
+        resolveComponent: (name) => {
+          return `element-plus/lib/${name}`;
+        },
+      }]
+    })
+  ]
+})
+```
+
+- import `.css` style
+
+```js
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import styleImport from 'vite-plugin-style-import'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    styleImport({
+      libs: [
+        {
+          libraryName: 'element-plus',
+          resolveStyle: (name) => {
+            return `element-plus/lib/theme-chalk/${name}.css`;
+          },
+          resolveComponent: (name) => {
+            return `element-plus/lib/${name}`;
+          },
+        }
+      ]
+    })
+  ]
+})
+```
+
 Next, if you need Button and Select, edit main.js:
 
 ```javascript
 import { createApp } from 'vue'
 import { ElButton, ElSelect } from 'element-plus';
 import App from './App.vue';
+// If you want to use the .scss style file, you need to import the base.scss file
+// import 'element-plus/packages/theme-chalk/src/base.scss'
 
 const app = createApp(App)
 app.component(ElButton.name, ElButton);
@@ -94,6 +194,9 @@ Full example (Component list [reference](https://github.com/element-plus/element
 ```javascript
 import { createApp } from 'vue'
 import App from './App.vue';
+// If you want to use the .scss style file, you need to import the base.scss file
+// import 'element-plus/packages/theme-chalk/src/base.scss'
+
 import {
   ElAlert,
   ElAside,
@@ -301,6 +404,8 @@ Partial import Element：
 import { createApp } from 'vue'
 import { ElButton } from 'element-plus';
 import App from './App.vue';
+// If you want to use the .scss style file, you need to import the base.scss file
+// import 'element-plus/packages/theme-chalk/src/base.scss'
 
 const app = createApp(App)
 app.config.globalProperties.$ELEMENT = option

website/docs/es/quickstart.md

@@ -35,6 +35,8 @@ El código anterior importa Element Plus completamente. Nótese que el archivo C
 
 #### En demanda
 
+**Vue CLI**
+
 Con la ayuda de [babel-plugin-import](https://github.com/ant-design/babel-plugin-import), podemos importar los componentes que necesitamos, haciendo nuestro proyecto más pequeño que de la otra manera.
 
 Primero, instale babel-plugin-import:
@@ -45,6 +47,31 @@ npm install babel-plugin-import -D
 
 Luego edite babel.config.js:
 
+- import `.scss` style
+
+:::warning
+Please make sure that `sass` and `sass-loader` dependencies have been installed and import `element-plus/packages/theme-chalk/src/base.scss` in the entry file.
+:::
+
+```js
+module.exports = {
+  plugins: [
+    [
+      "import",
+      {
+        libraryName: 'element-plus',
+        customStyleName: (name) => {
+          name = name.slice(3)
+          return `element-plus/packages/theme-chalk/src/${name}.scss`;
+        },
+      },
+    ],
+  ],
+};
+```
+
+- import `.css` style
+
 ```js
 module.exports = {
   plugins: [
@@ -53,8 +80,6 @@ module.exports = {
       {
         libraryName: 'element-plus',
         customStyleName: (name) => {
-          // Debido a la existencia de `customStyleName`, `style: true` no será efectivo.
-          // Así que si quieres usar el archivo fuente `.scss`, sólo tienes que reemplazar el nombre de la extensión de `.css` a `.scss`.
           return `element-plus/lib/theme-chalk/${name}.css`;
         },
       },
@@ -62,6 +87,80 @@ module.exports = {
   ],
 };
 ```
+ 
+**Vite**
+  
+Firstly，install [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import):
+
+```bash
+$ npm install vite-plugin-style-import -D
+```
+
+or if you use `Yarn` as package manager
+
+```bash
+$ yarn add vite-plugin-style-import -D
+```
+
+Then edit vite.config.js:
+
+- import `.scss` style
+
+
+:::warning
+Please make sure that the `sass` dependency have been installed and import `element-plus/packages/theme-chalk/src/base.scss` in the entry file.
+:::
+
+```js
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import styleImport from 'vite-plugin-style-import'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    styleImport({
+      libs: [{
+        libraryName: 'element-plus',
+        resolveStyle: (name) => {
+          name = name.splice(3)
+          return `element-plus/packages/theme-chalk/src/${name}.scss`;
+        },
+        resolveComponent: (name) => {
+          return `element-plus/lib/${name}`;
+        },
+      }]
+    })
+  ]
+})
+```
+
+- import `.css` style
+
+```js
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import styleImport from 'vite-plugin-style-import'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    styleImport({
+      libs: [
+        {
+          libraryName: 'element-plus',
+          resolveStyle: (name) => {
+            return `element-plus/lib/theme-chalk/${name}.css`;
+          },
+          resolveComponent: (name) => {
+            return `element-plus/lib/${name}`;
+          },
+        }
+      ]
+    })
+  ]
+})
+```
 
 Luego, si necesita Button y Select, edite main.js:
 
@@ -69,6 +168,8 @@ Luego, si necesita Button y Select, edite main.js:
 import { createApp } from 'vue'
 import { ElButton, ElSelect } from 'element-plus';
 import App from './App.vue';
+// If you want to use the .scss style file, you need to import the base.scss file
+// import 'element-plus/packages/theme-chalk/src/base.scss'
 
 const app = createApp(App)
 app.component(ElButton.name, ElButton);
@@ -87,6 +188,9 @@ Ejemplo completo (Referencia completa de componentes [reference](https://github.
 ```javascript
 import { createApp } from 'vue'
 import App from './App.vue';
+// If you want to use the .scss style file, you need to import the base.scss file
+// import 'element-plus/packages/theme-chalk/src/base.scss'
+
 import {
   ElAlert,
   ElAside,
@@ -296,6 +400,8 @@ Importando Element Plus parcialmente：
 import { createApp } from 'vue'
 import { ElButton } from 'element-plus';
 import App from './App.vue';
+// If you want to use the .scss style file, you need to import the base.scss file
+// import 'element-plus/packages/theme-chalk/src/base.scss'
 
 const app = createApp(App)
 app.config.globalProperties.$ELEMENT = option

website/docs/fr-FR/quickstart.md

@@ -35,6 +35,7 @@ L'exemple ci-dessus importe Element Plus entièrement. Notez que les fichiers CS
 
 #### À la demande
 
+**Vue CLI**
 Grâce au [babel-plugin-import](https://github.com/ant-design/babel-plugin-import), nous pouvons importer uniquement les composants désirés, rendant ainsi le projet plus léger.
 
 Tout d'abord, installez babel-plugin-import:
@@ -45,6 +46,31 @@ npm install babel-plugin-import -D
 
 Puis éditez babel.config.js:
 
+- import `.scss` style
+
+:::warning
+Please make sure that `sass` and `sass-loader` dependencies have been installed and import `element-plus/packages/theme-chalk/src/base.scss` in the entry file.
+:::
+
+```js
+module.exports = {
+  plugins: [
+    [
+      "import",
+      {
+        libraryName: 'element-plus',
+        customStyleName: (name) => {
+          name = name.slice(3)
+          return `element-plus/packages/theme-chalk/src/${name}.scss`;
+        },
+      },
+    ],
+  ],
+};
+```
+
+- import `.css` style
+
 ```js
 module.exports = {
   plugins: [
@@ -53,8 +79,6 @@ module.exports = {
       {
         libraryName: 'element-plus',
         customStyleName: (name) => {
-          // En raison de l'existence de "customStyleName", "style : true" ne sera pas efficace.
-          // Donc si vous voulez utiliser le fichier source `.scss`, il vous suffit de remplacer le nom de l'extension `.css` par `.scss`.
           return `element-plus/lib/theme-chalk/${name}.css`;
         },
       },
@@ -62,6 +86,79 @@ module.exports = {
   ],
 };
 ```
+  
+**Vite**
+  
+Firstly，install [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import):
+
+```bash
+$ npm install vite-plugin-style-import -D
+```
+
+or if you use `Yarn` as package manager
+
+```bash
+$ yarn add vite-plugin-style-import -D
+```
+
+Then edit vite.config.js:
+
+- import `.scss` style
+
+:::warning
+Please make sure that the `sass` dependency have been installed and import `element-plus/packages/theme-chalk/src/base.scss` in the entry file.
+:::
+
+```js
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import styleImport from 'vite-plugin-style-import'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    styleImport({
+      libs: [{
+        libraryName: 'element-plus',
+        resolveStyle: (name) => {
+          name = name.splice(3)
+          return `element-plus/packages/theme-chalk/src/${name}.scss`;
+        },
+        resolveComponent: (name) => {
+          return `element-plus/lib/${name}`;
+        },
+      }]
+    })
+  ]
+})
+```
+
+- import `.css` style
+
+```js
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import styleImport from 'vite-plugin-style-import'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    styleImport({
+      libs: [
+        {
+          libraryName: 'element-plus',
+          resolveStyle: (name) => {
+            return `element-plus/lib/theme-chalk/${name}.css`;
+          },
+          resolveComponent: (name) => {
+            return `element-plus/lib/${name}`;
+          },
+        }
+      ]
+    })
+  ]
+})
+```
 
 Ensuite, si vous n'avez besoin que de Button et Select, éditez main.js comme suit:
 
@@ -69,6 +166,8 @@ Ensuite, si vous n'avez besoin que de Button et Select, éditez main.js comme su
 import { createApp } from 'vue'
 import { ElButton, ElSelect } from 'element-plus';
 import App from './App.vue';
+// If you want to use the .scss style file, you need to import the base.scss file
+// import 'element-plus/packages/theme-chalk/src/base.scss'
 
 const app = createApp(App)
 app.component(ElButton.name, ElButton);
@@ -87,6 +186,9 @@ Exemple complet (liste complète des composants dans [reference](https://github.
 ```javascript
 import { createApp } from 'vue'
 import App from './App.vue';
+// If you want to use the .scss style file, you need to import the base.scss file
+// import 'element-plus/packages/theme-chalk/src/base.scss'
+
 import {
   ElAlert,
   ElAside,
@@ -294,6 +396,8 @@ Import partiel d'Element：
 import { createApp } from 'vue'
 import { ElButton } from 'element-plus';
 import App from './App.vue';
+// If you want to use the .scss style file, you need to import the base.scss file
+// import 'element-plus/packages/theme-chalk/src/base.scss'
 
 const app = createApp(App)
 app.config.globalProperties.$ELEMENT = option

website/docs/jp/quickstart.md

@@ -35,6 +35,8 @@ app.mount('#app')
 
 #### オンデマンド
 
+**Vue CLI**
+
 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) を用いて、 必要な分のコンポーネントをインポートし、プロジェクトをより小さくすることが出来ます。
 
 はじめに、babel-plugin-importをインストール:
@@ -45,6 +47,31 @@ npm install babel-plugin-import -D
 
 つぎに babel.config.js を編集します:
 
+- import `.scss` style
+
+:::warning
+Please make sure that `sass` and `sass-loader` dependencies have been installed and import `element-plus/packages/theme-chalk/src/base.scss` in the entry file.
+:::
+
+```js
+module.exports = {
+  plugins: [
+    [
+      "import",
+      {
+        libraryName: 'element-plus',
+        customStyleName: (name) => {
+          name = name.slice(3)
+          return `element-plus/packages/theme-chalk/src/${name}.scss`;
+        },
+      },
+    ],
+  ],
+};
+```
+
+- import `.css` style
+
 ```js
 module.exports = {
   plugins: [
@@ -53,8 +80,6 @@ module.exports = {
       {
         libraryName: 'element-plus',
         customStyleName: (name) => {
-          // `customStyleName` が存在するため、`style: true` は有効になりません。
-          // そのため、`.scss` のソースファイルを使いたい場合は、拡張子を `.css` から `.scss` に置き換えるだけです。
           return `element-plus/lib/theme-chalk/${name}.css`;
         },
       },
@@ -63,12 +88,87 @@ module.exports = {
 };
 ```
 
+**Vite**
+  
+Firstly，install [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import):
+
+```bash
+$ npm install vite-plugin-style-import -D
+```
+
+or if you use `Yarn` as package manager
+
+```bash
+$ yarn add vite-plugin-style-import -D
+```
+
+Then edit vite.config.js:
+
+- import `.scss` style
+
+:::warning
+Please make sure that the `sass` dependency have been installed and import `element-plus/packages/theme-chalk/src/base.scss` in the entry file.
+:::
+
+```js
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import styleImport from 'vite-plugin-style-import'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    styleImport({
+      libs: [{
+        libraryName: 'element-plus',
+        resolveStyle: (name) => {
+          name = name.splice(3)
+          return `element-plus/packages/theme-chalk/src/${name}.scss`;
+        },
+        resolveComponent: (name) => {
+          return `element-plus/lib/${name}`;
+        },
+      }]
+    })
+  ]
+})
+```
+
+- import `.css` style
+
+```js
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import styleImport from 'vite-plugin-style-import'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    styleImport({
+      libs: [
+        {
+          libraryName: 'element-plus',
+          resolveStyle: (name) => {
+            return `element-plus/lib/theme-chalk/${name}.css`;
+          },
+          resolveComponent: (name) => {
+            return `element-plus/lib/${name}`;
+          },
+        }
+      ]
+    })
+  ]
+})
+```
+
 次に、ボタンとセレクトが必要な場合、main.jsを編集します:
 
 ```javascript
 import { createApp } from 'vue'
 import { ElButton, ElSelect } from 'element-plus';
 import App from './App.vue';
+// If you want to use the .scss style file, you need to import the base.scss file
+// import 'element-plus/packages/theme-chalk/src/base.scss'
 
 const app = createApp(App)
 app.component(ElButton.name, ElButton);
@@ -87,6 +187,9 @@ app.mount('#app')
 ```javascript
 import { createApp } from 'vue'
 import App from './App.vue';
+// If you want to use the .scss style file, you need to import the base.scss file
+// import 'element-plus/packages/theme-chalk/src/base.scss'
+
 import {
   ElAlert,
   ElAside,
@@ -294,6 +397,8 @@ Element Plusを部分的にインポート：
 import { createApp } from 'vue'
 import { ElButton } from 'element-plus';
 import App from './App.vue';
+// If you want to use the .scss style file, you need to import the base.scss file
+// import 'element-plus/packages/theme-chalk/src/base.scss'
 
 const app = createApp(App)
 app.config.globalProperties.$ELEMENT = option

website/docs/zh-CN/quickstart.md

@@ -35,6 +35,8 @@ app.mount('#app')
 
 #### 按需引入
 
+**Vue CLI**
+  
 借助 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)，我们可以只引入需要的组件，以达到减小项目体积的目的。
 
 首先，安装 babel-plugin-import:
@@ -51,6 +53,31 @@ $ yarn add babel-plugin-import -D
 
 然后，将 babel.config.js 修改为：
 
+- 引入 `.scss` 样式
+
+:::warning
+请确保已经安装了 `sass` 和 `sass-loader` 依赖并将 `element-plus/packages/theme-chalk/src/base.scss` 文件在入口文件中引入
+:::
+
+```js
+module.exports = {
+  plugins: [
+    [
+      "import",
+      {
+        libraryName: 'element-plus',
+        customStyleName: (name) => {
+          name = name.slice(3)
+          return `element-plus/packages/theme-chalk/src/${name}.scss`;
+        },
+      },
+    ],
+  ],
+};
+```
+
+- 引入 `.css` 样式
+
 ```js
 module.exports = {
   plugins: [
@@ -59,8 +86,6 @@ module.exports = {
       {
         libraryName: 'element-plus',
         customStyleName: (name) => {
-          // 由于 customStyleName 在配置中被声明的原因，`style: true` 会被直接忽略掉，
-          // 如果你需要使用 scss 源文件，把文件结尾的扩展名从 `.css` 替换成 `.scss` 就可以了
           return `element-plus/lib/theme-chalk/${name}.css`;
         },
       },
@@ -68,6 +93,79 @@ module.exports = {
   ],
 };
 ```
+  
+**Vite**
+  
+首先，安装 [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import):
+
+```bash
+$ npm install vite-plugin-style-import -D
+```
+
+或者
+
+```bash
+$ yarn add vite-plugin-style-import -D
+```
+
+然后，将 vite.config.js 修改为：
+
+- 引入 `.scss` 样式
+
+:::warning
+请确保已经安装了 `sass` 依赖并将 `element-plus/packages/theme-chalk/src/base.scss` 文件在入口文件中引入
+:::
+
+```js
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import styleImport from 'vite-plugin-style-import'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    styleImport({
+      libs: [{
+        libraryName: 'element-plus',
+        resolveStyle: (name) => {
+          name = name.splice(3)
+          return `element-plus/packages/theme-chalk/src/${name}.scss`;
+        },
+        resolveComponent: (name) => {
+          return `element-plus/lib/${name}`;
+        },
+      }]
+    })
+  ]
+})
+```
+
+- 引入 `.css` 样式
+
+```js
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import styleImport from 'vite-plugin-style-import'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    styleImport({
+      libs: [
+        {
+          libraryName: 'element-plus',
+          resolveStyle: (name) => {
+            return `element-plus/lib/theme-chalk/${name}.css`;
+          },
+          resolveComponent: (name) => {
+            return `element-plus/lib/${name}`;
+          },
+        }
+      ]
+    })
+  ]
+})
+```
 
 接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：
 
@@ -75,6 +173,8 @@ module.exports = {
 import { createApp } from 'vue'
 import { ElButton, ElSelect } from 'element-plus';
 import App from './App.vue';
+// 如果要使用.scss样式文件，则需要引入base.scss文件
+// import 'element-plus/packages/theme-chalk/src/base.scss'
 
 const app = createApp(App)
 app.component(ElButton.name, ElButton);
@@ -93,6 +193,9 @@ app.mount('#app')
 ```javascript
 import { createApp } from 'vue'
 import App from './App.vue';
+// 如果要使用.scss样式文件，则需要引入base.scss文件
+// import 'element-plus/packages/theme-chalk/src/base.scss'
+
 import {
   ElAlert,
   ElAside,
@@ -300,6 +403,8 @@ app.use(ElementPlus, { size: 'small', zIndex: 3000 });
 import { createApp } from 'vue'
 import { ElButton } from 'element-plus';
 import App from './App.vue';
+// 如果要使用.scss样式文件，则需要引入base.scss文件
+// import 'element-plus/packages/theme-chalk/src/base.scss'
 
 const app = createApp(App)
 app.config.globalProperties.$ELEMENT = option