diff --git a/packages/nutui-inject-ui-styles/.gitignore b/packages/nutui-inject-ui-styles/.gitignore
new file mode 100644
index 0000000000..7e423e562c
--- /dev/null
+++ b/packages/nutui-inject-ui-styles/.gitignore
@@ -0,0 +1,3 @@
+.idea/
+.vscode/
+node_modules/
diff --git a/packages/nutui-inject-ui-styles/README.md b/packages/nutui-inject-ui-styles/README.md
new file mode 100644
index 0000000000..508eb34ed7
--- /dev/null
+++ b/packages/nutui-inject-ui-styles/README.md
@@ -0,0 +1,37 @@
+# @nutui/inject-ui-styles
+
+## 功能说明
+
+用于支持不同组件库引入 nutui 的样式文件，尤其是对于鸿蒙和 React Native 平台。
+
+## 使用方法
+
+1. 在 babel.config.js 文件中增加如下代码
+
+```js
+const injectUIStyles = require('@nutui/inject-ui-styles')
+
+{
+  [
+    [injectUIStyles({})]
+  ]
+}
+```
+
+2. 在 config/index.js 文件中增加如下内容( 废弃 )
+
+```js
+const {viteComponentStyle} = require('@nutui/inject-ui-styles')
+
+{
+  harmony: {
+    // 将编译方式设置为使用 Vite 编译
+    compiler: {
+      type: 'vite',
+      vitePlugins: [
+        viteComponentStyle({cName: '@nutui/nutui-react-taro', pName:'@xxx/ui'})
+      ]
+    }
+  }
+}
+```
diff --git a/packages/nutui-inject-ui-styles/dist/index.js b/packages/nutui-inject-ui-styles/dist/index.js
new file mode 100644
index 0000000000..b15d35678f
--- /dev/null
+++ b/packages/nutui-inject-ui-styles/dist/index.js
@@ -0,0 +1,189 @@
+'use strict';
+
+var fs = require('fs');
+var nodepath = require('path');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var nodepath__namespace = /*#__PURE__*/_interopNamespaceDefault(nodepath);
+
+// 当前nutui的组件
+const list = [
+    'button',
+    'cell',
+    'cellgroup',
+    'configprovider',
+    'image',
+    'overlay',
+    'col',
+    'divider',
+    'grid',
+    'griditem',
+    'layout',
+    'row',
+    'space',
+    'sticky',
+    'safearea',
+    'backtop',
+    'elevator',
+    'fixednav',
+    'hoverbutton',
+    'hoverbuttonitem',
+    'navbar',
+    'sidebar',
+    'tabbar',
+    'tabbaritem',
+    'tabpane',
+    'tabs',
+    'address',
+    'calendar',
+    'calendaritem',
+    'calendarcard',
+    'cascader',
+    'checkbox',
+    'checkboxgroup',
+    'datepicker',
+    'datepickerview',
+    'form',
+    'formitem',
+    'input',
+    'inputnumber',
+    'menu',
+    'menuitem',
+    'numberkeyboard',
+    'picker',
+    'pickerview',
+    'radio',
+    'radiogroup',
+    'range',
+    'rate',
+    'searchbar',
+    'shortpassword',
+    'signature',
+    'switch',
+    'textarea',
+    'uploader',
+    'actionsheet',
+    'badge',
+    'dialog',
+    'drag',
+    'empty',
+    'resultpage',
+    'infiniteloading',
+    'loading',
+    'noticebar',
+    'notify',
+    'popover',
+    'popup',
+    'pulltorefresh',
+    'skeleton',
+    'swipe',
+    'toast',
+    'animate',
+    'animatingnumbers',
+    'avatar',
+    'avatargroup',
+    'circleprogress',
+    'collapse',
+    'collapseitem',
+    'countdown',
+    'ellipsis',
+    'imagepreview',
+    'indicator',
+    'lottie',
+    'pagination',
+    'segmented',
+    'price',
+    'progress',
+    'step',
+    'steps',
+    'swiper',
+    'swiperitem',
+    'table',
+    'tag',
+    'tour',
+    'video',
+    'virtuallist',
+    'barrage',
+    'card',
+    'timedetail',
+    'timeselect',
+    'trendarrow',
+    'watermark',
+    'avatarcropper',
+];
+function injectCSS(options) {
+    return ({ types: t }) => {
+        const { cName, pName } = options;
+        return {
+            visitor: {
+                ImportDeclaration(path) {
+                    if (path.node.source.value === pName && path.node.specifiers.length) {
+                        // 检查是否已经插入过或者有其他条件判断
+                        // if (state.file.get('hasInsertedImport')) return
+                        const realNamePackage = nodepath__namespace.normalize(cName);
+                        let absolutePath = [];
+                        try {
+                            const resolvePath = require.resolve(`${realNamePackage}`);
+                            absolutePath = resolvePath.split(realNamePackage);
+                        }
+                        catch (e) {
+                            /* empty */
+                            console.log(`warn: cannot reslove ${realNamePackage}`);
+                        }
+                        path.node.specifiers.forEach((specifier) => {
+                            const name = specifier.imported.name.toLowerCase();
+                            if (!absolutePath[0])
+                                return;
+                            // td 下如果不处理，会报异常并阻塞。
+                            if (dynamic() && !list.includes(name))
+                                return;
+                            let importpath = `${absolutePath[0]}${realNamePackage}/dist/es/packages/${name}/style/${options.style === 'css' ? 'css' : 'index'}.js`;
+                            if (harmony() || dynamic()) {
+                                importpath = `${absolutePath[0]}${realNamePackage}/dist/es/packages/${name}/style/style.harmony.css`;
+                            }
+                            try {
+                                fs.accessSync(importpath);
+                                const importCss = t.importDeclaration([], t.stringLiteral(importpath));
+                                const programPath = path.findParent((path) => path.isProgram());
+                                programPath.unshiftContainer('body', importCss);
+                            }
+                            catch (e) {
+                                /* empty */
+                            }
+                        });
+                        // 设置一个标记，防止重复插入
+                        // state.file.set('hasInsertedImport', true)
+                    }
+                },
+            },
+        };
+    };
+}
+function harmony() {
+    return process.env.TARO_ENV.indexOf('harmony') > -1;
+}
+function dynamic() {
+    return process.env.TARO_ENV.indexOf('dynamic') > -1;
+}
+function babelComponentStyle(options = { cName: '@nutui/nutui-react-taro', pName: '' }) {
+    return injectCSS(options);
+}
+
+module.exports = babelComponentStyle;
+//# sourceMappingURL=index.js.map
diff --git a/packages/nutui-inject-ui-styles/dist/index.js.map b/packages/nutui-inject-ui-styles/dist/index.js.map
new file mode 100644
index 0000000000..eaa9ebb638
--- /dev/null
+++ b/packages/nutui-inject-ui-styles/dist/index.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/babel-component-style.ts"],"sourcesContent":["import { accessSync } from 'fs'\nimport * as nodepath from 'path'\nimport { IOptions } from './type'\n\n// 当前nutui的组件\nconst list = [\n  'button',\n  'cell',\n  'cellgroup',\n  'configprovider',\n  'image',\n  'overlay',\n  'col',\n  'divider',\n  'grid',\n  'griditem',\n  'layout',\n  'row',\n  'space',\n  'sticky',\n  'safearea',\n  'backtop',\n  'elevator',\n  'fixednav',\n  'hoverbutton',\n  'hoverbuttonitem',\n  'navbar',\n  'sidebar',\n  'tabbar',\n  'tabbaritem',\n  'tabpane',\n  'tabs',\n  'address',\n  'calendar',\n  'calendaritem',\n  'calendarcard',\n  'cascader',\n  'checkbox',\n  'checkboxgroup',\n  'datepicker',\n  'datepickerview',\n  'form',\n  'formitem',\n  'input',\n  'inputnumber',\n  'menu',\n  'menuitem',\n  'numberkeyboard',\n  'picker',\n  'pickerview',\n  'radio',\n  'radiogroup',\n  'range',\n  'rate',\n  'searchbar',\n  'shortpassword',\n  'signature',\n  'switch',\n  'textarea',\n  'uploader',\n  'actionsheet',\n  'badge',\n  'dialog',\n  'drag',\n  'empty',\n  'resultpage',\n  'infiniteloading',\n  'loading',\n  'noticebar',\n  'notify',\n  'popover',\n  'popup',\n  'pulltorefresh',\n  'skeleton',\n  'swipe',\n  'toast',\n  'animate',\n  'animatingnumbers',\n  'avatar',\n  'avatargroup',\n  'circleprogress',\n  'collapse',\n  'collapseitem',\n  'countdown',\n  'ellipsis',\n  'imagepreview',\n  'indicator',\n  'lottie',\n  'pagination',\n  'segmented',\n  'price',\n  'progress',\n  'step',\n  'steps',\n  'swiper',\n  'swiperitem',\n  'table',\n  'tag',\n  'tour',\n  'video',\n  'virtuallist',\n  'barrage',\n  'card',\n  'timedetail',\n  'timeselect',\n  'trendarrow',\n  'watermark',\n  'avatarcropper',\n]\n\nfunction injectCSS(options: IOptions) {\n  return ({ types: t }) => {\n    const { cName, pName } = options\n    return {\n      visitor: {\n        ImportDeclaration(path) {\n          if (path.node.source.value === pName && path.node.specifiers.length) {\n            // 检查是否已经插入过或者有其他条件判断\n            // if (state.file.get('hasInsertedImport')) return\n            const realNamePackage = nodepath.normalize(cName)\n            let absolutePath: string[] = []\n            try {\n              const resolvePath = require.resolve(`${realNamePackage}`)\n              absolutePath = resolvePath.split(realNamePackage)\n            } catch (e) {\n              /* empty */\n              console.log(`warn: cannot reslove ${realNamePackage}`)\n            }\n\n            path.node.specifiers.forEach((specifier) => {\n              const name = specifier.imported.name.toLowerCase()\n              if (!absolutePath[0]) return\n              // td 下如果不处理，会报异常并阻塞。\n              if (dynamic() && !list.includes(name)) return\n              let importpath = `${absolutePath[0]}${realNamePackage}/dist/es/packages/${name}/style/${options.style === 'css' ? 'css' : 'index'}.js`\n              if (harmony() || dynamic()) {\n                importpath = `${absolutePath[0]}${realNamePackage}/dist/es/packages/${name}/style/style.harmony.css`\n              }\n              try {\n                accessSync(importpath)\n                const importCss = t.importDeclaration(\n                  [],\n                  t.stringLiteral(importpath)\n                )\n                const programPath = path.findParent((path) => path.isProgram())\n                programPath.unshiftContainer('body', importCss)\n              } catch (e) {\n                /* empty */\n              }\n            })\n            // 设置一个标记，防止重复插入\n            // state.file.set('hasInsertedImport', true)\n          }\n        },\n      },\n    }\n  }\n}\n\nfunction harmony() {\n  return (process.env.TARO_ENV as any).indexOf('harmony') > -1\n}\n\nfunction dynamic() {\n  return (process.env.TARO_ENV as any).indexOf('dynamic') > -1\n}\n\nexport function babelComponentStyle(\n  options: IOptions = { cName: '@nutui/nutui-react-taro', pName: '' }\n) {\n  return injectCSS(options)\n}\n"],"names":["nodepath","accessSync"],"mappings":"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"}
\ No newline at end of file
diff --git a/packages/nutui-inject-ui-styles/package.json b/packages/nutui-inject-ui-styles/package.json
new file mode 100644
index 0000000000..d0f50b8120
--- /dev/null
+++ b/packages/nutui-inject-ui-styles/package.json
@@ -0,0 +1,44 @@
+{
+    "name": "@nutui/inject-ui-styles",
+    "version": "0.0.1",
+    "description": "",
+    "keywords": [
+        "Taro",
+        "Plugin"
+    ],
+    "author": "",
+    "homepage": "",
+    "license": "MIT",
+    "main": "dist/index.js",
+    "typings": "types/index.d.ts",
+    "files": [
+        "dist",
+        "index.js",
+        "types"
+    ],
+    "repository": {
+        "type": "git",
+        "url": ""
+    },
+    "scripts": {
+        "build": "rollup -c",
+        "dev": "rollup -c -w"
+    },
+    "bugs": {
+        "url": ""
+    },
+    "dependencies": {
+        "@tarojs/service": "^4.0.0",
+        "lodash.kebabcase": "^4.1.1",
+        "tslib": "^2.6.2",
+        "webpack-chain": "^6.5.1"
+    },
+    "devDependencies": {
+        "@types/lodash.kebabcase": "^4.1.9",
+        "@types/node": "^18.13.0",
+        "prettier": "^3.2.5",
+        "rollup": "^2.79.0",
+        "rollup-plugin-ts": "^3.0.2",
+        "typescript": "^5.4.5"
+    }
+}
diff --git a/packages/nutui-inject-ui-styles/rollup.config.js b/packages/nutui-inject-ui-styles/rollup.config.js
new file mode 100644
index 0000000000..1e8613df6b
--- /dev/null
+++ b/packages/nutui-inject-ui-styles/rollup.config.js
@@ -0,0 +1,22 @@
+const path = require('path')
+const ts = require('rollup-plugin-ts')
+
+const cwd = __dirname
+
+const base = {
+  external: ['@tarojs/service'],
+  plugins: [ts()],
+}
+
+// 供 CLI 编译时使用的 Taro 插件入口
+const compileConfig = {
+  input: path.join(cwd, 'src/index.ts'),
+  output: {
+    file: path.join(cwd, 'dist/index.js'),
+    format: 'cjs',
+    sourcemap: true,
+  },
+  ...base,
+}
+
+module.exports = [compileConfig]
diff --git a/packages/nutui-inject-ui-styles/src/babel-component-style.ts b/packages/nutui-inject-ui-styles/src/babel-component-style.ts
new file mode 100644
index 0000000000..75fd5421d7
--- /dev/null
+++ b/packages/nutui-inject-ui-styles/src/babel-component-style.ts
@@ -0,0 +1,172 @@
+import { accessSync } from 'fs'
+import * as nodepath from 'path'
+import { IOptions } from './type'
+
+// 当前nutui的组件
+const list = [
+  'button',
+  'cell',
+  'cellgroup',
+  'configprovider',
+  'image',
+  'overlay',
+  'col',
+  'divider',
+  'grid',
+  'griditem',
+  'layout',
+  'row',
+  'space',
+  'sticky',
+  'safearea',
+  'backtop',
+  'elevator',
+  'fixednav',
+  'hoverbutton',
+  'hoverbuttonitem',
+  'navbar',
+  'sidebar',
+  'tabbar',
+  'tabbaritem',
+  'tabpane',
+  'tabs',
+  'address',
+  'calendar',
+  'calendaritem',
+  'calendarcard',
+  'cascader',
+  'checkbox',
+  'checkboxgroup',
+  'datepicker',
+  'datepickerview',
+  'form',
+  'formitem',
+  'input',
+  'inputnumber',
+  'menu',
+  'menuitem',
+  'numberkeyboard',
+  'picker',
+  'pickerview',
+  'radio',
+  'radiogroup',
+  'range',
+  'rate',
+  'searchbar',
+  'shortpassword',
+  'signature',
+  'switch',
+  'textarea',
+  'uploader',
+  'actionsheet',
+  'badge',
+  'dialog',
+  'drag',
+  'empty',
+  'resultpage',
+  'infiniteloading',
+  'loading',
+  'noticebar',
+  'notify',
+  'popover',
+  'popup',
+  'pulltorefresh',
+  'skeleton',
+  'swipe',
+  'toast',
+  'animate',
+  'animatingnumbers',
+  'avatar',
+  'avatargroup',
+  'circleprogress',
+  'collapse',
+  'collapseitem',
+  'countdown',
+  'ellipsis',
+  'imagepreview',
+  'indicator',
+  'lottie',
+  'pagination',
+  'segmented',
+  'price',
+  'progress',
+  'step',
+  'steps',
+  'swiper',
+  'swiperitem',
+  'table',
+  'tag',
+  'tour',
+  'video',
+  'virtuallist',
+  'barrage',
+  'card',
+  'timedetail',
+  'timeselect',
+  'trendarrow',
+  'watermark',
+  'avatarcropper',
+]
+
+function injectCSS(options: IOptions) {
+  return ({ types: t }) => {
+    const { cName, pName } = options
+    return {
+      visitor: {
+        ImportDeclaration(path) {
+          if (path.node.source.value === pName && path.node.specifiers.length) {
+            // 检查是否已经插入过或者有其他条件判断
+            // if (state.file.get('hasInsertedImport')) return
+            const realNamePackage = nodepath.normalize(cName)
+            let absolutePath: string[] = []
+            try {
+              const resolvePath = require.resolve(`${realNamePackage}`)
+              absolutePath = resolvePath.split(realNamePackage)
+            } catch (e) {
+              /* empty */
+              console.log(`warn: cannot reslove ${realNamePackage}`)
+            }
+
+            path.node.specifiers.forEach((specifier) => {
+              const name = specifier.imported.name.toLowerCase()
+              if (!absolutePath[0]) return
+              // td 下如果不处理，会报异常并阻塞。
+              if (dynamic() && !list.includes(name)) return
+              let importpath = `${absolutePath[0]}${realNamePackage}/dist/es/packages/${name}/style/${options.style === 'css' ? 'css' : 'index'}.js`
+              if (harmony() || dynamic()) {
+                importpath = `${absolutePath[0]}${realNamePackage}/dist/es/packages/${name}/style/style.harmony.css`
+              }
+              try {
+                accessSync(importpath)
+                const importCss = t.importDeclaration(
+                  [],
+                  t.stringLiteral(importpath)
+                )
+                const programPath = path.findParent((path) => path.isProgram())
+                programPath.unshiftContainer('body', importCss)
+              } catch (e) {
+                /* empty */
+              }
+            })
+            // 设置一个标记，防止重复插入
+            // state.file.set('hasInsertedImport', true)
+          }
+        },
+      },
+    }
+  }
+}
+
+function harmony() {
+  return (process.env.TARO_ENV as any).indexOf('harmony') > -1
+}
+
+function dynamic() {
+  return (process.env.TARO_ENV as any).indexOf('dynamic') > -1
+}
+
+export function babelComponentStyle(
+  options: IOptions = { cName: '@nutui/nutui-react-taro', pName: '' }
+) {
+  return injectCSS(options)
+}
diff --git a/packages/nutui-inject-ui-styles/src/index.ts b/packages/nutui-inject-ui-styles/src/index.ts
new file mode 100644
index 0000000000..7624fa7c4c
--- /dev/null
+++ b/packages/nutui-inject-ui-styles/src/index.ts
@@ -0,0 +1,3 @@
+import { babelComponentStyle } from './babel-component-style'
+
+export default babelComponentStyle
diff --git a/packages/nutui-inject-ui-styles/src/type.ts b/packages/nutui-inject-ui-styles/src/type.ts
new file mode 100644
index 0000000000..7eab6cc4c4
--- /dev/null
+++ b/packages/nutui-inject-ui-styles/src/type.ts
@@ -0,0 +1,6 @@
+export interface IOptions {
+  pName: string
+  cName: string
+  // 默认加载组件的 scss 样式文件，鸿蒙由于不支持 css 变量，优先加载无css 变量的 style.harmony.css 文件。
+  style?: boolean | 'css'
+}
diff --git a/packages/nutui-inject-ui-styles/tsconfig.json b/packages/nutui-inject-ui-styles/tsconfig.json
new file mode 100644
index 0000000000..81c92fd0e2
--- /dev/null
+++ b/packages/nutui-inject-ui-styles/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "noImplicitAny": false,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "removeComments": false,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strictNullChecks": true,
+    "target": "ES2015",
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "module": "ESNext",
+    "sourceMap": true,
+    "declaration": true,
+    "declarationDir": "types",
+    "isolatedModules": false,
+    "types": ["node"]
+  },
+  "include": [
+    "./src"
+  ]
+}
diff --git a/packages/nutui-inject-ui-styles/types/index.d.ts b/packages/nutui-inject-ui-styles/types/index.d.ts
new file mode 100644
index 0000000000..09c9b715a2
--- /dev/null
+++ b/packages/nutui-inject-ui-styles/types/index.d.ts
@@ -0,0 +1,16 @@
+interface IOptions {
+  pName: string
+  cName: string
+  // 默认加载组件的 scss 样式文件，鸿蒙由于不支持 css 变量，优先加载无css 变量的 style.harmony.css 文件。
+  style?: boolean | 'css'
+}
+declare function babelComponentStyle(options?: IOptions): ({
+  types: t,
+}: {
+  types: any
+}) => {
+  visitor: {
+    ImportDeclaration(path: any): void
+  }
+}
+export { babelComponentStyle as default }