diff --git a/build.config.js b/build.config.js
index 9e546dec..1c964ad4 100644
--- a/build.config.js
+++ b/build.config.js
@@ -18,6 +18,7 @@ module.exports = {
         'fes-plugin-sass',
         'fes-plugin-vuex',
         'fes-preset-built-in',
+        'fes-plugin-windicss',
         'fes-runtime',
         'fes-utils'
     ],
diff --git a/docs/.vuepress/configs/sidebar/en.ts b/docs/.vuepress/configs/sidebar/en.ts
index b4128596..2a45f895 100644
--- a/docs/.vuepress/configs/sidebar/en.ts
+++ b/docs/.vuepress/configs/sidebar/en.ts
@@ -61,6 +61,7 @@ export const en: SidebarConfig = {
         '/reference/plugin/plugins/request.md',
         '/reference/plugin/plugins/vuex.md',
         '/reference/plugin/plugins/qiankun.md',
+        '/reference/plugin/plugins/windicss.md',
         '/reference/plugin/plugins/sass.md',
         '/reference/plugin/plugins/editor.md',
       ],
diff --git a/docs/.vuepress/configs/sidebar/zh.ts b/docs/.vuepress/configs/sidebar/zh.ts
index 6991f9c6..00963d75 100644
--- a/docs/.vuepress/configs/sidebar/zh.ts
+++ b/docs/.vuepress/configs/sidebar/zh.ts
@@ -61,6 +61,7 @@ export const zh: SidebarConfig = {
         '/zh/reference/plugin/plugins/request.md',
         '/zh/reference/plugin/plugins/vuex.md',
         '/zh/reference/plugin/plugins/qiankun.md',
+        '/zh/reference/plugin/plugins/windicss.md',
         '/zh/reference/plugin/plugins/sass.md',
         '/zh/reference/plugin/plugins/editor.md',
       ],
diff --git a/docs/reference/plugin/plugins/windicss.md b/docs/reference/plugin/plugins/windicss.md
new file mode 100644
index 00000000..77992602
--- /dev/null
+++ b/docs/reference/plugin/plugins/windicss.md
@@ -0,0 +1,28 @@
+# @fesjs/plugin-windicss
+
+
+## 介绍
+
+`windicss` 支持
+
+## 启用方式
+在 `package.json` 中引入依赖：
+```json
+{
+    "devDependencies": {
+        "@fesjs/plugin-windicss": "^2.0.0"
+    },
+}
+```
+
+## 配置
+
+在 `.fes.js` 配置文件中添加自定义配置，详细配置[请看](https://windicss.org/integrations/webpack.html)：
+
+```
+{
+    windicss: {
+        root: './',
+    }
+}
+```
diff --git a/docs/zh/reference/plugin/plugins/windicss.md b/docs/zh/reference/plugin/plugins/windicss.md
new file mode 100644
index 00000000..be28d80b
--- /dev/null
+++ b/docs/zh/reference/plugin/plugins/windicss.md
@@ -0,0 +1,28 @@
+# @fesjs/plugin-windicss
+
+
+## 介绍
+
+`windicss` 支持
+
+## 启用方式
+在 `package.json` 中引入依赖：
+```json
+{
+    "devDependencies": {
+        "@fesjs/plugin-windicss": "^2.0.0"
+    },
+}
+```
+
+## 配置
+
+在 `.fes.js` 配置文件中添加自定义配置，详细配置[请看](https://windicss.org/integrations/webpack.html)：
+
+```js
+export default {
+    windicss: {
+        root: './',
+    }
+}
+```
diff --git a/packages/fes-plugin-windicss/.fatherrc.js b/packages/fes-plugin-windicss/.fatherrc.js
new file mode 100644
index 00000000..332f1bff
--- /dev/null
+++ b/packages/fes-plugin-windicss/.fatherrc.js
@@ -0,0 +1,3 @@
+export default {
+  disableTypeCheck: false,
+};
diff --git a/packages/fes-plugin-windicss/LICENSE b/packages/fes-plugin-windicss/LICENSE
new file mode 100644
index 00000000..0978fbf7
--- /dev/null
+++ b/packages/fes-plugin-windicss/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020-present webank
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/packages/fes-plugin-windicss/package.json b/packages/fes-plugin-windicss/package.json
new file mode 100644
index 00000000..b9ec0e65
--- /dev/null
+++ b/packages/fes-plugin-windicss/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "@fesjs/plugin-windicss",
+  "version": "2.0.0",
+  "description": "@fesjs/plugin-windicss",
+  "main": "lib/index.js",
+  "files": [
+    "lib"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/WeBankFinTech/fes.js.git",
+    "directory": "packages/fes-plugin-windicss"
+  },
+  "keywords": [
+    "fes"
+  ],
+  "author": "qlin",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/WeBankFinTech/fes.js/issues"
+  },
+  "homepage": "https://github.com/WeBankFinTech/fes.js#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.5"
+  },
+  "dependencies": {
+    "windicss-webpack-plugin": "^1.5.8"
+  }
+}
\ No newline at end of file
diff --git a/packages/fes-plugin-windicss/src/index.js b/packages/fes-plugin-windicss/src/index.js
new file mode 100644
index 00000000..27054df9
--- /dev/null
+++ b/packages/fes-plugin-windicss/src/index.js
@@ -0,0 +1,25 @@
+
+import WindiCSSWebpackPlugin from 'windicss-webpack-plugin';
+import { resolve } from 'path';
+
+
+export default (api) => {
+    api.describe({
+        key: 'windicss',
+        config: {
+            default: {}
+        }
+    });
+
+    api.addEntryImportsAhead(() => [{ source: 'windi.css' }]);
+
+    api.chainWebpack((memo) => {
+        memo.plugin('windicss').use(WindiCSSWebpackPlugin, [
+            {
+                config: resolve(__dirname, '../windi.config.js'),
+                ...api.config.windicss
+            }
+        ]);
+        return memo;
+    });
+};
diff --git a/packages/fes-plugin-windicss/windi.config.js b/packages/fes-plugin-windicss/windi.config.js
new file mode 100644
index 00000000..7436c3ab
--- /dev/null
+++ b/packages/fes-plugin-windicss/windi.config.js
@@ -0,0 +1,8 @@
+export default {
+    extract: {
+        // A common use case is scanning files from the root directory
+        include: ['**/*.{vue,jsx,js,ts,tsx}'],
+        // if you are excluding files, make sure you always include node_modules and .git
+        exclude: ['node_modules', '.git', 'dist']
+    }
+};
diff --git a/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/vue.js b/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/vue.js
index 66788475..99a8c1b8 100644
--- a/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/vue.js
+++ b/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/vue.js
@@ -16,6 +16,6 @@ export default function createVueWebpackConfig({
         .end();
 
     webpackConfig
-        .plugin('vue-loader')
+        .plugin('vue-loader-plugin')
         .use(require('vue-loader').VueLoaderPlugin);
 }
diff --git a/packages/fes-template/package.json b/packages/fes-template/package.json
index 40e01eeb..2810630b 100644
--- a/packages/fes-template/package.json
+++ b/packages/fes-template/package.json
@@ -58,6 +58,7 @@
     "@fesjs/plugin-qiankun": "^2.0.0",
     "@fesjs/plugin-sass": "^2.0.0",
     "@fesjs/plugin-monaco-editor": "^2.0.0-beta.0",
+    "@fesjs/plugin-windicss": "^2.0.0",
     "ant-design-vue": "^2.2.0",
     "vue": "^3.0.5",
     "vuex": "^4.0.0"
diff --git a/packages/fes-template/src/pages/index.vue b/packages/fes-template/src/pages/index.vue
index 1fb60d14..62907123 100644
--- a/packages/fes-template/src/pages/index.vue
+++ b/packages/fes-template/src/pages/index.vue
@@ -2,7 +2,7 @@
     <div :class="$style.red">
         <a-input placeholder="请输入。。。" />
         <a-button type="primary">Primary</a-button>
-        <div>国际化 {{t("test")}}</div>
+        <div class="m-2">国际化 {{t("test")}}</div>
         fes & 拉夫德鲁 <br />
         <access :id="accessId"> accessOnepicess1 <input /> </access>
         <div v-access="accessId"> accessOnepicess2 <input /> </div>
@@ -29,10 +29,7 @@ import { Button, Input } from 'ant-design-vue';
 export default {
     components: {
         [Button.name]: Button,
-        [Input.name]: Input,
-    },
-    mounted(){
-        console.log("$style:", this.$style)
+        [Input.name]: Input
     },
     setup() {
         const fes = ref('fes upgrade to vue3');
@@ -129,6 +126,9 @@ export default {
             enumsGet: enums.get,
             roles
         };
+    },
+    mounted() {
+        console.log('$style:', this.$style);
     }
 };
 </script>
diff --git a/yarn.lock b/yarn.lock
index 17c49f3a..e420ea2f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -147,6 +147,13 @@
     "@types/lodash" "^4.14.165"
     lodash "^4.17.15"
 
+"@antfu/utils@^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.npmjs.org/@antfu/utils/-/utils-0.3.0.tgz#6306c43b52a883bd8e973e3ed8dd64248418bcc4"
+  integrity sha512-UU8TLr/EoXdg7OjMp0h9oDoIAVr+Z/oW9cpOxQQyrsz6Qzd2ms/1CdWx8fl2OQdFpxGmq5Vc4TwfLHId6nAZjA==
+  dependencies:
+    "@types/throttle-debounce" "^2.1.0"
+
 "@apideck/better-ajv-errors@^0.2.4":
   version "0.2.5"
   resolved "http://127.0.0.1:8001/@apideck/better-ajv-errors/download/@apideck/better-ajv-errors-0.2.5.tgz#b9c0092b7f7f23c356a0a31600334f7b8958458b"
@@ -2924,6 +2931,11 @@
   resolved "http://127.0.0.1:8001/@types/strip-json-comments/download/@types/strip-json-comments-0.0.30.tgz#9aa30c04db212a9a0649d6ae6fd50accc40748a1"
   integrity sha1-mqMMBNshKpoGSdaub9UKzMQHSKE=
 
+"@types/throttle-debounce@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/@types/throttle-debounce/-/throttle-debounce-2.1.0.tgz#1c3df624bfc4b62f992d3012b84c56d41eab3776"
+  integrity sha512-5eQEtSCoESnh2FsiLTxE121IiE60hnMqcb435fShf4bpLRjEu1Eoekht23y6zXS9Ts3l+Szu3TARnTsA0GkOkQ==
+
 "@types/trusted-types@^2.0.2":
   version "2.0.2"
   resolved "http://127.0.0.1:8001/@types/trusted-types/download/@types/trusted-types-2.0.2.tgz#fc25ad9943bcac11cceb8168db4f275e0e72e756"
@@ -3474,6 +3486,28 @@
     "@webassemblyjs/ast" "1.11.1"
     "@xtuc/long" "4.2.2"
 
+"@windicss/config@1.5.1":
+  version "1.5.1"
+  resolved "https://registry.npmjs.org/@windicss/config/-/config-1.5.1.tgz#e3fdaddfc553442c85f67f2e9290ef46ce87b3a1"
+  integrity sha512-nWNgvvJj9RcYhLcqwju/Z8FfaHRjyWHDYS3IgY7lWUM+vWTLFuKqhavKfC1589kdYjiO9JeX07Vg+YzfcxP0Yw==
+  dependencies:
+    debug "^4.3.2"
+    jiti "^1.12.9"
+    windicss "^3.2.1"
+
+"@windicss/plugin-utils@^1.5.1":
+  version "1.5.1"
+  resolved "https://registry.npmjs.org/@windicss/plugin-utils/-/plugin-utils-1.5.1.tgz#9750bb72e8c14585e011d46a33351d47d8519e31"
+  integrity sha512-gxJiTCMKv1p1x4W2BLG2yfNe+DfIVPc8+aKvfCUCtOpdg5GB5yzhuAC4ROsKiXHxu4QXoojrh7jXH6ELlrELpQ==
+  dependencies:
+    "@antfu/utils" "^0.3.0"
+    "@windicss/config" "1.5.1"
+    debug "^4.3.2"
+    fast-glob "^3.2.7"
+    magic-string "^0.25.7"
+    micromatch "^4.0.4"
+    windicss "^3.2.1"
+
 "@xtuc/ieee754@^1.2.0":
   version "1.2.0"
   resolved "http://127.0.0.1:8001/@xtuc/ieee754/download/@xtuc/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790"
@@ -6300,7 +6334,7 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "http://127.0.0.1:8001/fast-deep-equal/download/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha1-On1WtVnWy8PrUSMlJE5hmmXGxSU=
 
-fast-glob@^3.1.1, fast-glob@^3.2.4, fast-glob@^3.2.5:
+fast-glob@^3.1.1, fast-glob@^3.2.4, fast-glob@^3.2.5, fast-glob@^3.2.7:
   version "3.2.7"
   resolved "http://127.0.0.1:8001/fast-glob/download/fast-glob-3.2.7.tgz#fd6cb7a2d7e9aa7a7846111e85a196d6b2f766a1"
   integrity sha1-/Wy3otfpqnp4RhEehaGW1rL3ZqE=
@@ -8431,6 +8465,11 @@ jest@^27.0.6:
     import-local "^3.0.2"
     jest-cli "^27.0.6"
 
+jiti@^1.12.9:
+  version "1.12.9"
+  resolved "https://registry.npmjs.org/jiti/-/jiti-1.12.9.tgz#2ce45b265cfc8dc91ebd70a5204807cf915291bc"
+  integrity sha512-TdcJywkQtcwLxogc4rSMAi479G2eDPzfW0fLySks7TPhgZZ4s/tM6stnzayIh3gS/db3zExWJyUx4cNWrwAmoQ==
+
 joi@17.3.0:
   version "17.3.0"
   resolved "http://127.0.0.1:8001/joi/download/joi-17.3.0.tgz#f1be4a6ce29bc1716665819ac361dfa139fff5d2"
@@ -13485,6 +13524,11 @@ webpack-sources@^3.2.0:
   resolved "http://127.0.0.1:8001/webpack-sources/download/webpack-sources-3.2.0.tgz#b16973bcf844ebcdb3afde32eda1c04d0b90f89d"
   integrity sha1-sWlzvPhE682zr94y7aHATQuQ+J0=
 
+webpack-virtual-modules@^0.4.3:
+  version "0.4.3"
+  resolved "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.4.3.tgz#cd597c6d51d5a5ecb473eea1983a58fa8a17ded9"
+  integrity sha512-5NUqC2JquIL2pBAAo/VfBP6KuGkHIZQXW/lNKupLPfhViwh8wNsu0BObtl09yuKZszeEUfbXz8xhrHvSG16Nqw==
+
 webpack@^5.24.2, webpack@^5.50.0:
   version "5.50.0"
   resolved "http://127.0.0.1:8001/webpack/download/webpack-5.50.0.tgz#5562d75902a749eb4d75131f5627eac3a3192527"
@@ -13620,6 +13664,25 @@ wildcard@^2.0.0:
   resolved "http://127.0.0.1:8001/wildcard/download/wildcard-2.0.0.tgz#a77d20e5200c6faaac979e4b3aadc7b3dd7f8fec"
   integrity sha1-p30g5SAMb6qsl55LOq3Hs91/j+w=
 
+windicss-webpack-plugin@^1.5.8:
+  version "1.5.8"
+  resolved "https://registry.npmjs.org/windicss-webpack-plugin/-/windicss-webpack-plugin-1.5.8.tgz#3682db188eccc9ba410ab9906fe427ccc9478fac"
+  integrity sha512-T4T/lg22KDw/imms7hcRYrSE8t5OpQRx6JkuFXCITW7AoO6KyaiBJSua3tf6gQpA0OluX99mMrt2quEBKGShvQ==
+  dependencies:
+    "@windicss/plugin-utils" "^1.5.1"
+    debug "^4.3.2"
+    loader-utils "^2.0.0"
+    lodash "^4.17.21"
+    magic-string "^0.25.7"
+    upath "^2.0.1"
+    webpack-virtual-modules "^0.4.3"
+    windicss "^3.2.1"
+
+windicss@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.npmjs.org/windicss/-/windicss-3.2.1.tgz#bd0f7b9ebabba04ea8dfedcbb0263c2ef9591db4"
+  integrity sha512-LusrIrryBFHAPQ/OOTbS4EWWuzI6eGeJglI9nQ3kDBr1cqH69NWt8Z8q59f9kTkgptXroejmWfksWwqgHs8EVw==
+
 word-wrap@^1.0.3, word-wrap@^1.2.3, word-wrap@~1.2.3:
   version "1.2.3"
   resolved "http://127.0.0.1:8001/word-wrap/download/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"