diff --git a/.changeset/lovely-dolls-hang.md b/.changeset/lovely-dolls-hang.md
new file mode 100644
index 000000000000..2f6bfedbb00f
--- /dev/null
+++ b/.changeset/lovely-dolls-hang.md
@@ -0,0 +1,7 @@
+---
+'@modern-js/uni-builder': patch
+---
+
+fix(uni-builder): styled-components not works when use webpack swc-plugin
+
+fix(uni-builder): 修复在使用 webpack swc 插件时 styled-components 不生效的问题
diff --git a/packages/builder/uni-builder/src/webpack/plugins/styledComponents.ts b/packages/builder/uni-builder/src/webpack/plugins/styledComponents.ts
index 5b670e2bd1b9..fdf562a6e23a 100644
--- a/packages/builder/uni-builder/src/webpack/plugins/styledComponents.ts
+++ b/packages/builder/uni-builder/src/webpack/plugins/styledComponents.ts
@@ -1,4 +1,5 @@
 import type { RsbuildPlugin } from '@rsbuild/core';
+import { PLUGIN_SWC_NAME } from '@rsbuild/core';
 import {
   isServerTarget,
   mergeChainedOptions,
@@ -12,6 +13,8 @@ export const pluginStyledComponents = (
 ): RsbuildPlugin => ({
   name: 'uni-builder:styled-components',
 
+  pre: [PLUGIN_SWC_NAME, 'uni-builder:babel'],
+
   setup(api) {
     api.modifyBundlerChain(async (chain, { CHAIN_ID, isProd }) => {
       const isSSR = isServerTarget(api.context.targets);
diff --git a/packages/builder/uni-builder/tests/__snapshots__/styledComponents.test.ts.snap b/packages/builder/uni-builder/tests/__snapshots__/styledComponents.test.ts.snap
index b248ddf8d0d7..a706dab99ea5 100644
--- a/packages/builder/uni-builder/tests/__snapshots__/styledComponents.test.ts.snap
+++ b/packages/builder/uni-builder/tests/__snapshots__/styledComponents.test.ts.snap
@@ -485,6 +485,12 @@ exports[`plugins/styled-components > should works in webpack swc mode 1`] = `
                 "libraryName": "@arco-design/web-react/icon",
               },
             ],
+            "styledComponents": {
+              "displayName": true,
+              "pure": false,
+              "ssr": false,
+              "transpileTemplateLiterals": true,
+            },
           },
           "jsc": {
             "externalHelpers": true,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 77a91632f76b..cc948d3bee8c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5986,9 +5986,6 @@ importers:
         specifier: ^3.3.4
         version: 3.3.4
     devDependencies:
-      '@modern-js/builder-plugin-swc':
-        specifier: workspace:*
-        version: link:../../../packages/builder/plugin-swc
       '@modern-js/e2e':
         specifier: workspace:*
         version: link:../../../packages/toolkit/e2e
@@ -6001,6 +5998,9 @@ importers:
       '@playwright/test':
         specifier: 1.33.0
         version: 1.33.0
+      '@rsbuild/plugin-swc':
+        specifier: 0.3.7
+        version: 0.3.7(@rsbuild/core@0.3.7)
       '@rsbuild/shared':
         specifier: 0.3.7
         version: 0.3.7(@swc/helpers@0.5.3)
@@ -8027,9 +8027,6 @@ importers:
         specifier: ^5
         version: 5.3.3
     devDependencies:
-      '@modern-js/builder-plugin-swc':
-        specifier: workspace:*
-        version: link:../../../packages/builder/plugin-swc
       '@modern-js/builder-rspack-provider':
         specifier: workspace:*
         version: link:../../../packages/builder/builder-rspack-provider
diff --git a/tests/e2e/builder/cases/externalHelpers/index.test.ts b/tests/e2e/builder/cases/externalHelpers/index.test.ts
index d87edfd69d7d..93efa21a6994 100644
--- a/tests/e2e/builder/cases/externalHelpers/index.test.ts
+++ b/tests/e2e/builder/cases/externalHelpers/index.test.ts
@@ -2,13 +2,13 @@ import path from 'path';
 import { build } from '@scripts/shared';
 import { providerType } from '@scripts/helper';
 import { expect, test } from '@modern-js/e2e/playwright';
-import { builderPluginSwc } from '@modern-js/builder-plugin-swc';
+import { pluginSwc } from '@rsbuild/plugin-swc';
 
 test('should externalHelpers by default', async () => {
   const builder = await build({
     cwd: __dirname,
     entry: { index: path.resolve(__dirname, './src/main.ts') },
-    plugins: providerType === 'rspack' ? [] : [builderPluginSwc()],
+    plugins: providerType === 'rspack' ? [] : [pluginSwc()],
   });
   const files = await builder.unwrapOutputJSON(false);
 
diff --git a/tests/e2e/builder/cases/html/minify/index.swc.test.ts b/tests/e2e/builder/cases/html/minify/index.swc.test.ts
index fe7bbed30b98..3ea3771dffac 100644
--- a/tests/e2e/builder/cases/html/minify/index.swc.test.ts
+++ b/tests/e2e/builder/cases/html/minify/index.swc.test.ts
@@ -1,7 +1,7 @@
 import { join } from 'path';
 import { expect, test } from '@modern-js/e2e/playwright';
 import { build, getHrefByEntryName } from '@scripts/shared';
-import { builderPluginSwc } from '@modern-js/builder-plugin-swc';
+import { pluginSwc } from '@rsbuild/plugin-swc';
 
 const fixtures = __dirname;
 
@@ -14,7 +14,7 @@ test('should minify template js & css correctly when use swc-plugin', async ({
       main: join(fixtures, 'src/index.ts'),
     },
     runServer: true,
-    plugins: [builderPluginSwc()],
+    plugins: [pluginSwc()],
     builderConfig: {
       html: {
         template: './static/index.html',
diff --git a/tests/e2e/builder/cases/lodash/index.swc.test.ts b/tests/e2e/builder/cases/lodash/index.swc.test.ts
index e9337577311c..63bc508ca40d 100644
--- a/tests/e2e/builder/cases/lodash/index.swc.test.ts
+++ b/tests/e2e/builder/cases/lodash/index.swc.test.ts
@@ -1,7 +1,7 @@
 import * as path from 'path';
 import { expect, test } from '@modern-js/e2e/playwright';
 import { build } from '@scripts/shared';
-import { builderPluginSwc } from '@modern-js/builder-plugin-swc';
+import { pluginSwc } from '@rsbuild/plugin-swc';
 
 test('should optimize lodash bundle size when using SWC plugin', async () => {
   const builder = await build({
@@ -21,7 +21,7 @@ test('should optimize lodash bundle size when using SWC plugin', async () => {
         },
       },
     },
-    plugins: [builderPluginSwc()],
+    plugins: [pluginSwc()],
     runServer: false,
   });
 
@@ -49,7 +49,7 @@ test('should not optimize lodash bundle size when transformLodash is false and u
         },
       },
     },
-    plugins: [builderPluginSwc()],
+    plugins: [pluginSwc()],
     runServer: false,
   });
 
diff --git a/tests/e2e/builder/cases/performance/removeConsole.swc.test.ts b/tests/e2e/builder/cases/performance/removeConsole.swc.test.ts
index 4f80382ae660..20f217e1a7d9 100644
--- a/tests/e2e/builder/cases/performance/removeConsole.swc.test.ts
+++ b/tests/e2e/builder/cases/performance/removeConsole.swc.test.ts
@@ -1,7 +1,7 @@
 import { join } from 'path';
 import { expect, test } from '@modern-js/e2e/playwright';
 import { build } from '@scripts/shared';
-import { builderPluginSwc } from '@modern-js/builder-plugin-swc';
+import { pluginSwc } from '@rsbuild/plugin-swc';
 
 const cwd = join(__dirname, 'removeConsole');
 
@@ -26,7 +26,7 @@ test('should remove specified console correctly when using SWC plugin', async ()
     entry: {
       main: join(cwd, 'src/index.js'),
     },
-    plugins: [builderPluginSwc()],
+    plugins: [pluginSwc()],
     builderConfig: {
       performance: {
         removeConsole: ['log', 'warn'],
@@ -48,7 +48,7 @@ test('should remove all console correctly when using SWC plugin', async () => {
     entry: {
       main: join(cwd, 'src/index.js'),
     },
-    plugins: [builderPluginSwc()],
+    plugins: [pluginSwc()],
     builderConfig: {
       performance: {
         removeConsole: true,
diff --git a/tests/e2e/builder/cases/source/plugin-import/index.webpack.test.ts b/tests/e2e/builder/cases/source/plugin-import/index.webpack.test.ts
index 76ce05e809d8..0076ab7e9c8a 100644
--- a/tests/e2e/builder/cases/source/plugin-import/index.webpack.test.ts
+++ b/tests/e2e/builder/cases/source/plugin-import/index.webpack.test.ts
@@ -1,7 +1,7 @@
 import path from 'path';
 import { build } from '@scripts/shared';
 import { expect, test } from '@modern-js/e2e/playwright';
-import { builderPluginSwc } from '@modern-js/builder-plugin-swc';
+import { pluginSwc } from '@rsbuild/plugin-swc';
 import { findEntry, copyPkgToNodeModules, cases, shareTest } from './helper';
 
 /* webpack can receive Function type configuration */
@@ -34,7 +34,7 @@ test('should import with function customName', async () => {
 
   const builder = await build({
     ...setupConfig,
-    plugins: [builderPluginSwc()],
+    plugins: [pluginSwc()],
     builderConfig: {
       source: {
         transformImport: [
@@ -63,7 +63,7 @@ test('should import with template config with SWC', async () => {
   const setupConfig = {
     cwd: __dirname,
     entry: { index: path.resolve(__dirname, './src/index.js') },
-    plugins: [builderPluginSwc()],
+    plugins: [pluginSwc()],
   };
 
   {
@@ -110,6 +110,6 @@ cases.forEach(c => {
   shareTest(`${name}-webpack`, entry, config);
 
   shareTest(`${name}-webpack-swc`, entry, config, {
-    plugins: [builderPluginSwc()],
+    plugins: [pluginSwc()],
   });
 });
diff --git a/tests/e2e/builder/cases/styled-component/index.swc.test.ts b/tests/e2e/builder/cases/styled-component/index.swc.test.ts
index 57538647fc78..5b773599fd23 100644
--- a/tests/e2e/builder/cases/styled-component/index.swc.test.ts
+++ b/tests/e2e/builder/cases/styled-component/index.swc.test.ts
@@ -1,7 +1,7 @@
 import path from 'path';
 import { build } from '@scripts/shared';
 import { expect, test } from '@modern-js/e2e/playwright';
-import { builderPluginSwc } from '@modern-js/builder-plugin-swc';
+import { pluginSwc } from '@rsbuild/plugin-swc';
 
 const commonConfig = {
   cwd: __dirname,
@@ -36,7 +36,7 @@ const noStyledConfig = {
 test('should allow to disable styled-components when use swc plugin', async () => {
   const builder = await build({
     ...noStyledConfig,
-    plugins: [builderPluginSwc()],
+    plugins: [pluginSwc()],
   });
   const files = await builder.unwrapOutputJSON();
 
@@ -53,7 +53,7 @@ test('should allow to disable styled-components when use swc plugin', async () =
 test('should transform styled-components by default when use swc plugin', async () => {
   const builder = await build({
     ...commonConfig,
-    plugins: [builderPluginSwc()],
+    plugins: [pluginSwc()],
   });
   const files = await builder.unwrapOutputJSON();
 
diff --git a/tests/e2e/builder/cases/swc/index.swc.test.ts b/tests/e2e/builder/cases/swc/index.swc.test.ts
index 120d1887329b..c74c4de2c681 100644
--- a/tests/e2e/builder/cases/swc/index.swc.test.ts
+++ b/tests/e2e/builder/cases/swc/index.swc.test.ts
@@ -3,7 +3,7 @@ import * as path from 'path';
 import { readFileSync } from 'fs';
 import { expect, test } from '@modern-js/e2e/playwright';
 import { build, getHrefByEntryName } from '@scripts/shared';
-import { builderPluginSwc } from '@modern-js/builder-plugin-swc';
+import { pluginSwc } from '@rsbuild/plugin-swc';
 
 test('should run SWC compilation correctly', async ({ page }) => {
   const builder = await build({
@@ -11,7 +11,7 @@ test('should run SWC compilation correctly', async ({ page }) => {
     entry: {
       index: path.resolve(__dirname, './src/main.ts'),
     },
-    plugins: [builderPluginSwc()],
+    plugins: [pluginSwc()],
     runServer: true,
   });
 
@@ -33,7 +33,7 @@ test('should optimize lodash bundle size', async ({ page }) => {
     entry: {
       index: path.resolve(__dirname, './src/main.ts'),
     },
-    plugins: [builderPluginSwc()],
+    plugins: [pluginSwc()],
     runServer: true,
     builderConfig: {
       output: {
@@ -65,7 +65,7 @@ test('should use define for class', async () => {
       index: path.resolve(__dirname, './src/main.ts'),
     },
     plugins: [
-      builderPluginSwc({
+      pluginSwc({
         overrides: [
           {
             test: /override.ts/,
@@ -111,7 +111,7 @@ test('core-js-entry', async () => {
       index: path.resolve(__dirname, './src/core-js-entry.ts'),
     },
     plugins: [
-      builderPluginSwc({
+      pluginSwc({
         env: {
           targets: 'ie 9',
           mode: 'entry',
@@ -136,7 +136,7 @@ test('core-js-usage', async () => {
       index: path.resolve(__dirname, './src/core-js-usage.ts'),
     },
     plugins: [
-      builderPluginSwc({
+      pluginSwc({
         env: {
           targets: 'ie 9',
           mode: 'usage',
diff --git a/tests/e2e/builder/cases/top-level-await/index.swc.test.ts b/tests/e2e/builder/cases/top-level-await/index.swc.test.ts
index be8cd27b5bcb..81030d09ad8b 100644
--- a/tests/e2e/builder/cases/top-level-await/index.swc.test.ts
+++ b/tests/e2e/builder/cases/top-level-await/index.swc.test.ts
@@ -1,7 +1,7 @@
 import * as path from 'path';
 import { expect, test } from '@modern-js/e2e/playwright';
 import { build, getHrefByEntryName } from '@scripts/shared';
-import { builderPluginSwc } from '@modern-js/builder-plugin-swc';
+import { pluginSwc } from '@rsbuild/plugin-swc';
 
 test('should run top level await correctly when using SWC', async ({
   page,
@@ -11,7 +11,7 @@ test('should run top level await correctly when using SWC', async ({
     entry: {
       index: path.resolve(__dirname, './src/index.ts'),
     },
-    plugins: [builderPluginSwc()],
+    plugins: [pluginSwc()],
     runServer: true,
   });
 
diff --git a/tests/e2e/builder/package.json b/tests/e2e/builder/package.json
index 60d1ba232b8e..de644ee6991f 100644
--- a/tests/e2e/builder/package.json
+++ b/tests/e2e/builder/package.json
@@ -16,9 +16,9 @@
     "vue": "^3.3.4"
   },
   "devDependencies": {
+    "@rsbuild/plugin-swc": "0.3.7",
     "@rsbuild/shared": "0.3.7",
     "@modern-js/uni-builder": "workspace:*",
-    "@modern-js/builder-plugin-swc": "workspace:*",
     "@modern-js/e2e": "workspace:*",
     "@modern-js/utils": "workspace:*",
     "@types/node": "^14",
diff --git a/tests/integration/storybook/package.json b/tests/integration/storybook/package.json
index b60dc5a68526..f7b8a8fbfc93 100644
--- a/tests/integration/storybook/package.json
+++ b/tests/integration/storybook/package.json
@@ -15,7 +15,6 @@
     "@modern-js/builder-rspack-provider": "workspace:*",
     "@modern-js/builder-webpack-provider": "workspace:*",
     "@modern-js/storybook": "workspace:*",
-    "@modern-js/builder-plugin-swc": "workspace:*",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "prop-types": "^15.8.1"