diff --git a/examples/react-component/README.md b/examples/react-component-bundle-false/README.md
similarity index 100%
rename from examples/react-component/README.md
rename to examples/react-component-bundle-false/README.md
diff --git a/examples/react-component-bundle-false/package.json b/examples/react-component-bundle-false/package.json
new file mode 100644
index 00000000..88ac0fb3
--- /dev/null
+++ b/examples/react-component-bundle-false/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "@examples/react-component-bundle-false",
+  "private": true,
+  "scripts": {
+    "build": "rslib build"
+  },
+  "devDependencies": {
+    "@rsbuild/plugin-react": "1.0.1-rc.4",
+    "@rslib/core": "workspace:*",
+    "@types/react": "^18.3.5",
+    "react": "^18.3.1"
+  },
+  "peerDependencies": {
+    "react": "*"
+  }
+}
diff --git a/examples/react-component-bundle-false/rslib.config.ts b/examples/react-component-bundle-false/rslib.config.ts
new file mode 100644
index 00000000..5051fbe1
--- /dev/null
+++ b/examples/react-component-bundle-false/rslib.config.ts
@@ -0,0 +1,53 @@
+import { pluginReact } from '@rsbuild/plugin-react';
+import { type LibConfig, defineConfig } from '@rslib/core';
+
+const shared: LibConfig = {
+  bundle: false,
+};
+
+export default defineConfig({
+  source: {
+    entry: {
+      index: ['./src/**', '!./src/env.d.ts'],
+    },
+  },
+  lib: [
+    {
+      ...shared,
+      format: 'esm',
+      output: {
+        distPath: {
+          root: './dist/esm',
+          css: '.',
+          cssAsync: '.',
+        },
+      },
+      bundle: false,
+    },
+    // {
+    //   ...shared,
+    //   format: 'cjs',
+    //   output: {
+    //     distPath: {
+    //       root: './dist/cjs',
+    //       css: '.',
+    //       cssAsync: '.',
+    //     },
+    //   },
+    //   bundle: false,
+    // },
+  ],
+  // tools: {
+  //   bundlerChain(config, {CHAIN_ID}) {
+  //     const cssExtract = CHAIN_ID.PLUGIN.MINI_CSS_EXTRACT
+  //     config.plugins.delete(cssExtract)
+
+  //   },
+  //   cssExtract: {
+  //     loaderOptions: {
+  //       rootDir: './src',
+  //     },
+  //   },
+  // },
+  plugins: [pluginReact()],
+});
diff --git a/examples/react-component-bundle-false/src/CounterButton.module.css b/examples/react-component-bundle-false/src/CounterButton.module.css
new file mode 100644
index 00000000..e4cb6ffe
--- /dev/null
+++ b/examples/react-component-bundle-false/src/CounterButton.module.css
@@ -0,0 +1,3 @@
+.button {
+  background: blue;
+}
diff --git a/examples/react-component/src/CounterButton.tsx b/examples/react-component-bundle-false/src/CounterButton.tsx
similarity index 61%
rename from examples/react-component/src/CounterButton.tsx
rename to examples/react-component-bundle-false/src/CounterButton.tsx
index 7075a25b..6305ff2d 100644
--- a/examples/react-component/src/CounterButton.tsx
+++ b/examples/react-component-bundle-false/src/CounterButton.tsx
@@ -1,3 +1,4 @@
+import styles from './CounterButton.module.css';
 interface CounterButtonProps {
   onClick: () => void;
   label: string;
@@ -7,7 +8,7 @@ export const CounterButton: React.FC<CounterButtonProps> = ({
   onClick,
   label,
 }) => (
-  <button type="button" onClick={onClick}>
+  <button type="button" className={styles.button} onClick={onClick}>
     {label}
   </button>
 );
diff --git a/examples/react-component-bundle-false/src/env.d.ts b/examples/react-component-bundle-false/src/env.d.ts
new file mode 100644
index 00000000..3d673e2e
--- /dev/null
+++ b/examples/react-component-bundle-false/src/env.d.ts
@@ -0,0 +1,4 @@
+declare module '*.module.css' {
+  const classes: { [key: string]: string };
+  export default classes;
+}
diff --git a/examples/react-component/src/index.tsx b/examples/react-component-bundle-false/src/index.tsx
similarity index 94%
rename from examples/react-component/src/index.tsx
rename to examples/react-component-bundle-false/src/index.tsx
index 8edca025..e7fbc387 100644
--- a/examples/react-component/src/index.tsx
+++ b/examples/react-component-bundle-false/src/index.tsx
@@ -1,5 +1,6 @@
 import { CounterButton } from './CounterButton';
 import { useCounter } from './useCounter';
+import './reset.css';
 
 export const Counter: React.FC = () => {
   const { count, increment, decrement } = useCounter();
diff --git a/examples/react-component-bundle-false/src/reset.css b/examples/react-component-bundle-false/src/reset.css
new file mode 100644
index 00000000..891c4e14
--- /dev/null
+++ b/examples/react-component-bundle-false/src/reset.css
@@ -0,0 +1,3 @@
+.body {
+  background: red;
+}
diff --git a/examples/react-component/src/useCounter.tsx b/examples/react-component-bundle-false/src/useCounter.tsx
similarity index 100%
rename from examples/react-component/src/useCounter.tsx
rename to examples/react-component-bundle-false/src/useCounter.tsx
diff --git a/examples/react-component-bundle-false/tsconfig.json b/examples/react-component-bundle-false/tsconfig.json
new file mode 100644
index 00000000..1261367d
--- /dev/null
+++ b/examples/react-component-bundle-false/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "strict": true
+  },
+  "include": ["src/**/*"]
+}
diff --git a/examples/react-component-bundle/README.md b/examples/react-component-bundle/README.md
new file mode 100644
index 00000000..0bd27a52
--- /dev/null
+++ b/examples/react-component-bundle/README.md
@@ -0,0 +1,3 @@
+# @examples/react-component
+
+This example demonstrates how to use Rslib to build a simple React component.
diff --git a/examples/react-component/package.json b/examples/react-component-bundle/package.json
similarity index 85%
rename from examples/react-component/package.json
rename to examples/react-component-bundle/package.json
index 42e06266..e625aef9 100644
--- a/examples/react-component/package.json
+++ b/examples/react-component-bundle/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@examples/react-component",
+  "name": "@examples/react-component-bundle",
   "private": true,
   "scripts": {
     "build": "rslib build"
diff --git a/examples/react-component/rslib.config.ts b/examples/react-component-bundle/rslib.config.ts
similarity index 100%
rename from examples/react-component/rslib.config.ts
rename to examples/react-component-bundle/rslib.config.ts
diff --git a/examples/react-component-bundle/src/CounterButton.module.css b/examples/react-component-bundle/src/CounterButton.module.css
new file mode 100644
index 00000000..e4cb6ffe
--- /dev/null
+++ b/examples/react-component-bundle/src/CounterButton.module.css
@@ -0,0 +1,3 @@
+.button {
+  background: blue;
+}
diff --git a/examples/react-component-bundle/src/CounterButton.tsx b/examples/react-component-bundle/src/CounterButton.tsx
new file mode 100644
index 00000000..6305ff2d
--- /dev/null
+++ b/examples/react-component-bundle/src/CounterButton.tsx
@@ -0,0 +1,14 @@
+import styles from './CounterButton.module.css';
+interface CounterButtonProps {
+  onClick: () => void;
+  label: string;
+}
+
+export const CounterButton: React.FC<CounterButtonProps> = ({
+  onClick,
+  label,
+}) => (
+  <button type="button" className={styles.button} onClick={onClick}>
+    {label}
+  </button>
+);
diff --git a/examples/react-component-bundle/src/env.d.ts b/examples/react-component-bundle/src/env.d.ts
new file mode 100644
index 00000000..3d673e2e
--- /dev/null
+++ b/examples/react-component-bundle/src/env.d.ts
@@ -0,0 +1,4 @@
+declare module '*.module.css' {
+  const classes: { [key: string]: string };
+  export default classes;
+}
diff --git a/examples/react-component-bundle/src/index.tsx b/examples/react-component-bundle/src/index.tsx
new file mode 100644
index 00000000..e7fbc387
--- /dev/null
+++ b/examples/react-component-bundle/src/index.tsx
@@ -0,0 +1,15 @@
+import { CounterButton } from './CounterButton';
+import { useCounter } from './useCounter';
+import './reset.css';
+
+export const Counter: React.FC = () => {
+  const { count, increment, decrement } = useCounter();
+
+  return (
+    <div>
+      <h2>Counter: {count}</h2>
+      <CounterButton onClick={decrement} label="-" />
+      <CounterButton onClick={increment} label="+" />
+    </div>
+  );
+};
diff --git a/examples/react-component-bundle/src/reset.css b/examples/react-component-bundle/src/reset.css
new file mode 100644
index 00000000..891c4e14
--- /dev/null
+++ b/examples/react-component-bundle/src/reset.css
@@ -0,0 +1,3 @@
+.body {
+  background: red;
+}
diff --git a/examples/react-component-bundle/src/useCounter.tsx b/examples/react-component-bundle/src/useCounter.tsx
new file mode 100644
index 00000000..885dbdfe
--- /dev/null
+++ b/examples/react-component-bundle/src/useCounter.tsx
@@ -0,0 +1,10 @@
+import { useState } from 'react';
+
+export const useCounter = (initialValue = 0) => {
+  const [count, setCount] = useState(initialValue);
+
+  const increment = () => setCount((prev) => prev + 1);
+  const decrement = () => setCount((prev) => prev - 1);
+
+  return { count, increment, decrement };
+};
diff --git a/examples/react-component/tsconfig.json b/examples/react-component-bundle/tsconfig.json
similarity index 100%
rename from examples/react-component/tsconfig.json
rename to examples/react-component-bundle/tsconfig.json
diff --git a/packages/core/package.json b/packages/core/package.json
index a5044db8..993b9b3d 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -38,6 +38,7 @@
   },
   "dependencies": {
     "@rsbuild/core": "1.0.4",
+    "@rslib/lib-css-extract-loader": "workspace:*",
     "rsbuild-plugin-dts": "workspace:*"
   },
   "devDependencies": {
diff --git a/packages/core/src/config.ts b/packages/core/src/config.ts
index 95ce128c..a75a9197 100644
--- a/packages/core/src/config.ts
+++ b/packages/core/src/config.ts
@@ -1,4 +1,5 @@
 import fs from 'node:fs';
+import { createRequire } from 'node:module';
 import path, { dirname, extname, isAbsolute, join } from 'node:path';
 import {
   type RsbuildConfig,
@@ -9,6 +10,7 @@ import {
   mergeRsbuildConfig,
   rspack,
 } from '@rsbuild/core';
+import type { RsbuildPlugin } from '@rsbuild/core';
 import glob from 'fast-glob';
 import {
   DEFAULT_CONFIG_NAME,
@@ -47,6 +49,8 @@ import {
 } from './utils/syntax';
 import { loadTsconfig } from './utils/tsconfig';
 
+const require = createRequire(import.meta.url);
+
 /**
  * This function helps you to autocomplete configuration types.
  * It accepts a Rslib config object, or a function that returns a config.
@@ -605,6 +609,41 @@ const composeSyntaxConfig = (
   };
 };
 
+const pluginName = 'rsbuild:lib-css';
+
+const pluginLibCss = (rootDir: string): RsbuildPlugin => ({
+  name: pluginName,
+  setup(api) {
+    api.modifyBundlerChain((config, { CHAIN_ID }) => {
+      const cssExtract = CHAIN_ID.PLUGIN.MINI_CSS_EXTRACT;
+      config.plugins.delete(cssExtract);
+
+      for (const ruleId of [
+        CHAIN_ID.RULE.CSS,
+        CHAIN_ID.RULE.SASS,
+        CHAIN_ID.RULE.LESS,
+        CHAIN_ID.RULE.STYLUS,
+      ]) {
+        const rule = config.module.rule(ruleId);
+        if (rule.uses.has(CHAIN_ID.USE.MINI_CSS_EXTRACT)) {
+          rule
+            .use(CHAIN_ID.USE.MINI_CSS_EXTRACT)
+            .loader(require.resolve('@rslib/lib-css-extract-loader'))
+            .options({
+              rootDir,
+            });
+        }
+      }
+    });
+  },
+});
+
+const composeCssConfig = (rootDir: string): RsbuildConfig => {
+  return {
+    plugins: [pluginLibCss(rootDir)],
+  };
+};
+
 const composeEntryConfig = async (
   entries: NonNullable<RsbuildConfig['source']>['entry'],
   bundle: LibConfig['bundle'],
@@ -665,11 +704,16 @@ const composeEntryConfig = async (
     }
   }
 
-  return {
+  const lcp = await calcLongestCommonPath(Object.values(resolvedEntries));
+  const cssConfig = composeCssConfig(lcp === null ? root : lcp);
+
+  const entryConfig: RsbuildConfig = {
     source: {
       entry: resolvedEntries,
     },
   };
+
+  return mergeRsbuildConfig(entryConfig, cssConfig);
 };
 
 const composeBundleConfig = (
@@ -691,8 +735,12 @@ const composeBundleConfig = (
             // If data.request already have an extension, we replace it with new extension
             // This may result in a change in semantics,
             // user should use copy to keep origin file or use another separate entry to deal this
-            let request = data.request;
+            let request: string = data.request;
             if (request[0] === '.') {
+              if (request.includes('compiled/css-loader')) {
+                return callback();
+              }
+
               request = extname(request)
                 ? request.replace(/\.[^.]+$/, jsExtension)
                 : `${request}${jsExtension}`;
diff --git a/packages/core/src/types/config/index.ts b/packages/core/src/types/config/index.ts
index 6c93a6fc..71d263db 100644
--- a/packages/core/src/types/config/index.ts
+++ b/packages/core/src/types/config/index.ts
@@ -49,11 +49,19 @@ export type BannerAndFooter = {
   dts?: string;
 };
 
+// export type Redirect = {
+//   alias?: boolean;
+//   style?: boolean;
+//   asset?: boolean;
+//   autoExtension?: boolean;
+// };
+
 export interface LibConfig extends RsbuildConfig {
   bundle?: boolean;
   format?: Format;
   autoExtension?: boolean;
   autoExternal?: AutoExternal;
+  // redirect?: Redirect;
   /** Support esX and browserslist query */
   syntax?: Syntax;
   externalHelpers?: boolean;
diff --git a/packages/lib-css-extract-loader/LICENSE b/packages/lib-css-extract-loader/LICENSE
new file mode 100644
index 00000000..ff387063
--- /dev/null
+++ b/packages/lib-css-extract-loader/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024-present Bytedance, Inc. and its affiliates.
+
+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.
diff --git a/packages/lib-css-extract-loader/README.md b/packages/lib-css-extract-loader/README.md
new file mode 100644
index 00000000..4ecddaef
--- /dev/null
+++ b/packages/lib-css-extract-loader/README.md
@@ -0,0 +1,19 @@
+<picture>
+  <img alt="Rslib Banner" src="https://assets.rspack.dev/rslib/rslib-banner.png">
+</picture>
+
+# Rslib
+
+Rslib is a library build tool powered by [Rsbuild](https://rsbuild.dev). It allows library developers to leverage the knowledge and ecosystem of webpack and Rspack.
+
+<!-- ## Documentation
+
+https://rslib.dev/ -->
+
+## Contributing
+
+Please read the [Contributing Guide](https://github.com/web-infra-dev/rslib/blob/main/CONTRIBUTING.md).
+
+## License
+
+Rslib is [MIT licensed](https://github.com/web-infra-dev/rslib/blob/main/LICENSE).
diff --git a/packages/lib-css-extract-loader/package.json b/packages/lib-css-extract-loader/package.json
new file mode 100644
index 00000000..a4806e90
--- /dev/null
+++ b/packages/lib-css-extract-loader/package.json
@@ -0,0 +1,60 @@
+{
+  "name": "@rslib/lib-css-extract-loader",
+  "version": "0.0.5",
+  "description": "lib-css-extract-loader poc",
+  "homepage": "https://rslib.dev",
+  "bugs": {
+    "url": "https://github.com/web-infra-dev/rslib/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/web-infra-dev/rslib",
+    "directory": "packages/plugin-dts"
+  },
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rslib build",
+    "dev": "rslib build --watch"
+  },
+  "devDependencies": {
+    "@microsoft/api-extractor": "^7.47.9",
+    "@rsbuild/core": "1.0.4",
+    "@rslib/tsconfig": "workspace:*",
+    "@rspack/core": "1.0.0",
+    "rslib": "npm:@rslib/core@0.0.6",
+    "typescript": "^5.6.2"
+  },
+  "peerDependencies": {
+    "@microsoft/api-extractor": "^7",
+    "@rsbuild/core": "1.x",
+    "typescript": "^5"
+  },
+  "peerDependenciesMeta": {
+    "@microsoft/api-extractor": {
+      "optional": true
+    },
+    "typescript": {
+      "optional": true
+    }
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true,
+    "registry": "https://registry.npmjs.org/"
+  }
+}
diff --git a/packages/lib-css-extract-loader/rslib.config.ts b/packages/lib-css-extract-loader/rslib.config.ts
new file mode 100644
index 00000000..ce7d7e37
--- /dev/null
+++ b/packages/lib-css-extract-loader/rslib.config.ts
@@ -0,0 +1,24 @@
+import { defineConfig } from 'rslib';
+
+export default defineConfig({
+  lib: [
+    {
+      format: 'esm',
+      bundle: false,
+      output: {
+        syntax: ['node 16'],
+      },
+      dts: {
+        bundle: false,
+      },
+    },
+  ],
+  source: {
+    entry: {
+      index: ['./src/**'],
+    },
+  },
+  output: {
+    target: 'node',
+  },
+});
diff --git a/packages/lib-css-extract-loader/src/index.ts b/packages/lib-css-extract-loader/src/index.ts
new file mode 100644
index 00000000..a254e461
--- /dev/null
+++ b/packages/lib-css-extract-loader/src/index.ts
@@ -0,0 +1,233 @@
+/**
+ * The following code is modified based on
+ * https://github.com/web-infra-dev/rspack/blob/0a89e433a9f8596a7c6c4326542f168b5982d2da/packages/rspack/src/builtin-plugin/css-extract/loader.ts
+ */
+import path from 'node:path';
+import type { LoaderDefinition } from '@rspack/core';
+
+interface DependencyDescription {
+  identifier: string;
+  content: string;
+  context: string;
+  media?: string;
+  supports?: string;
+  layer?: string;
+  sourceMap?: string;
+  identifierIndex: number;
+  filepath: string;
+}
+
+export interface CssExtractRspackLoaderOptions {
+  emit?: boolean;
+  esModule?: boolean;
+  layer?: string;
+  defaultExport?: boolean;
+
+  rootDir?: string;
+}
+
+const PLUGIN_NAME = 'LIB_CSS_EXTRACT_LOADER';
+
+function stringifyLocal(value: any) {
+  return typeof value === 'function' ? value.toString() : JSON.stringify(value);
+}
+
+const loader: LoaderDefinition = function loader(content) {
+  if (
+    this._compiler?.options?.experiments?.css &&
+    this._module &&
+    (this._module.type === 'css' ||
+      this._module.type === 'css/auto' ||
+      this._module.type === 'css/global' ||
+      this._module.type === 'css/module')
+  ) {
+    return content;
+  }
+  return;
+};
+
+export const pitch: LoaderDefinition['pitch'] = function (request, _, _data) {
+  if (
+    this._compiler?.options?.experiments?.css &&
+    this._module &&
+    (this._module.type === 'css' ||
+      this._module.type === 'css/auto' ||
+      this._module.type === 'css/global' ||
+      this._module.type === 'css/module')
+  ) {
+    const e = new Error(
+      `use type 'css' and \`CssExtractRspackPlugin\` together, please set \`experiments.css\` to \`false\` or set \`{ type: "javascript/auto" }\` for rules with \`CssExtractRspackPlugin\` in your rspack config (now \`CssExtractRspackPlugin\` does nothing).`,
+    );
+    e.stack = undefined;
+    this.emitWarning(e);
+
+    return;
+  }
+
+  const options = this.getOptions() as CssExtractRspackLoaderOptions;
+  const emit = typeof options.emit !== 'undefined' ? options.emit : true;
+  const callback = this.async();
+  const filepath = this.resourcePath;
+  const rootDir = options.rootDir ?? this.rootContext;
+
+  const handleExports = (
+    originalExports:
+      | { default: Record<string, any>; __esModule: true }
+      | Record<string, any>,
+  ) => {
+    let locals: Record<string, string> | undefined;
+    let namedExport: boolean;
+
+    const esModule =
+      typeof options.esModule !== 'undefined' ? options.esModule : true;
+    let dependencies: DependencyDescription[] = [];
+
+    try {
+      // eslint-disable-next-line no-underscore-dangle
+      const exports = originalExports.__esModule
+        ? originalExports.default
+        : originalExports;
+
+      namedExport =
+        // eslint-disable-next-line no-underscore-dangle
+        originalExports.__esModule &&
+        (!originalExports.default || !('locals' in originalExports.default));
+
+      if (namedExport) {
+        for (const key of Object.keys(originalExports)) {
+          if (key !== 'default') {
+            if (!locals) {
+              locals = {};
+            }
+
+            locals[key] = (originalExports as Record<string, string>)[key]!;
+          }
+        }
+      } else {
+        locals = exports?.locals;
+      }
+
+      if (Array.isArray(exports) && emit) {
+        const identifierCountMap = new Map();
+
+        dependencies = exports
+          .map(([id, content, media, sourceMap, supports, layer]) => {
+            const identifier = id;
+            const context = this.rootContext;
+
+            const count = identifierCountMap.get(identifier) || 0;
+
+            identifierCountMap.set(identifier, count + 1);
+
+            return {
+              identifier,
+              context,
+              content,
+              media,
+              supports,
+              layer,
+              identifierIndex: count,
+              sourceMap: sourceMap
+                ? JSON.stringify(sourceMap)
+                : // eslint-disable-next-line no-undefined
+                  undefined,
+              filepath,
+            };
+          })
+          .filter((item) => item !== null) as DependencyDescription[];
+      }
+    } catch (e) {
+      callback(e as Error);
+
+      return;
+    }
+
+    const result = (function makeResult() {
+      if (locals) {
+        if (namedExport) {
+          const identifiers = Array.from(
+            (function* generateIdentifiers() {
+              let identifierId = 0;
+
+              for (const key of Object.keys(locals)) {
+                identifierId += 1;
+
+                yield [`_${identifierId.toString(16)}`, key];
+              }
+            })(),
+          );
+
+          const localsString = identifiers
+            .map(
+              ([id, key]) =>
+                `\nvar ${id} = ${stringifyLocal(locals![key as string])};`,
+            )
+            .join('');
+          const exportsString = `export { ${identifiers
+            .map(([id, key]) => `${id} as ${JSON.stringify(key)}`)
+            .join(', ')} }`;
+
+          const defaultExport =
+            typeof options.defaultExport !== 'undefined'
+              ? options.defaultExport
+              : false;
+
+          return defaultExport
+            ? `${localsString}\n${exportsString}\nexport default { ${identifiers
+                .map(([id, key]) => `${JSON.stringify(key)}: ${id}`)
+                .join(', ')} }\n`
+            : `${localsString}\n${exportsString}\n`;
+        }
+
+        return `\n${
+          esModule ? 'export default' : 'module.exports = '
+        } ${JSON.stringify(locals)};`;
+      }
+      if (esModule) {
+        return '\nexport {};';
+      }
+      return '';
+    })();
+
+    let resultSource = `// extracted by ${PLUGIN_NAME}`;
+
+    let importCssFiles = '';
+
+    // biome-ignore lint/complexity/noForEach: <explanation>
+    dependencies.forEach(({ content, filepath }) => {
+      const distFilepath = path
+        .relative(rootDir, filepath)
+        .replace(/\.module\.css/g, '_module.css');
+
+      console.log(distFilepath);
+
+      this.emitFile(distFilepath, content);
+      importCssFiles += '\n';
+      importCssFiles += `import "${distFilepath}"`;
+    });
+
+    resultSource += importCssFiles;
+
+    resultSource += result;
+
+    callback(null, resultSource, undefined);
+  };
+
+  this.importModule(
+    `${this.resourcePath}.webpack[javascript/auto]!=!!!${request}`,
+    {
+      layer: options.layer,
+    },
+    (error, exports) => {
+      if (error) {
+        callback(error);
+
+        return;
+      }
+
+      handleExports(exports);
+    },
+  );
+};
+
+export default loader;
diff --git a/packages/lib-css-extract-loader/tests/index.test.ts b/packages/lib-css-extract-loader/tests/index.test.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/lib-css-extract-loader/tsconfig.json b/packages/lib-css-extract-loader/tsconfig.json
new file mode 100644
index 00000000..2553bd1d
--- /dev/null
+++ b/packages/lib-css-extract-loader/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "extends": "@rslib/tsconfig/base",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "baseUrl": "./",
+    "rootDir": "src",
+    "declaration": true,
+    "isolatedDeclarations": true,
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler"
+  },
+  "include": ["src"],
+  "exclude": ["**/node_modules"]
+}
diff --git a/packages/lib-css-extract-loader/vitest.config.ts b/packages/lib-css-extract-loader/vitest.config.ts
new file mode 100644
index 00000000..85a2b2a4
--- /dev/null
+++ b/packages/lib-css-extract-loader/vitest.config.ts
@@ -0,0 +1,9 @@
+import { defineConfig } from 'vitest/config';
+import { shared } from '../../vitest.workspace';
+
+export default defineConfig({
+  test: {
+    ...shared,
+    name: 'unit-lib-css-extract-loader',
+  },
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9eaf68b7..a8e9c125 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -37,7 +37,7 @@ importers:
         version: 0.8.0
       nx:
         specifier: ^19.7.3
-        version: 19.7.3
+        version: 19.7.4
       prettier:
         specifier: ^3.3.3
         version: 3.3.3
@@ -286,7 +286,7 @@ importers:
         specifier: ^5.6.2
         version: 5.6.2
 
-  examples/react-component:
+  examples/react-component-bundle:
     devDependencies:
       '@rsbuild/plugin-react':
         specifier: 1.0.2
@@ -301,6 +301,21 @@ importers:
         specifier: ^18.3.1
         version: 18.3.1
 
+  examples/react-component-bundle-false:
+    devDependencies:
+      '@rsbuild/plugin-react':
+        specifier: 1.0.1-rc.4
+        version: 1.0.1-rc.4(@rsbuild/core@1.0.4)
+      '@rslib/core':
+        specifier: workspace:*
+        version: link:../../packages/core
+      '@types/react':
+        specifier: ^18.3.5
+        version: 18.3.5
+      react:
+        specifier: ^18.3.1
+        version: 18.3.1
+
   packages/core:
     dependencies:
       '@microsoft/api-extractor':
@@ -309,6 +324,9 @@ importers:
       '@rsbuild/core':
         specifier: 1.0.4
         version: 1.0.4
+      '@rslib/lib-css-extract-loader':
+        specifier: workspace:*
+        version: link:../lib-css-extract-loader
       rsbuild-plugin-dts:
         specifier: workspace:*
         version: link:../plugin-dts
@@ -375,6 +393,27 @@ importers:
         specifier: ^5.6.2
         version: 5.6.2
 
+  packages/lib-css-extract-loader:
+    devDependencies:
+      '@microsoft/api-extractor':
+        specifier: ^7.47.9
+        version: 7.47.9(@types/node@18.19.39)
+      '@rsbuild/core':
+        specifier: 1.0.4
+        version: 1.0.4
+      '@rslib/tsconfig':
+        specifier: workspace:*
+        version: link:../../scripts/tsconfig
+      '@rspack/core':
+        specifier: 1.0.0
+        version: 1.0.0(@swc/helpers@0.5.13)
+      rslib:
+        specifier: npm:@rslib/core@0.0.6
+        version: '@rslib/core@0.0.6(@microsoft/api-extractor@7.47.9(@types/node@18.19.39))(typescript@5.6.2)'
+      typescript:
+        specifier: ^5.6.2
+        version: 5.6.2
+
   packages/plugin-dts:
     dependencies:
       fast-glob:
@@ -838,66 +877,66 @@ packages:
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
     engines: {node: '>= 8'}
 
-  '@nrwl/tao@19.7.3':
-    resolution: {integrity: sha512-cIGhnSFPZdVTp4bI0fqwFoE9i7ToPg5jXz+hNMl/MTwcOQfKQ1JJY/ZPLM3aBUPORFIZ/GECQEycUb6+xCB56g==}
+  '@nrwl/tao@19.7.4':
+    resolution: {integrity: sha512-vyfVcdtG3/I+/nKraEyPuaw70gxMIvKxQAD/n1k+T9J/dDpADoeOGZaygRCVRgIU1PPc7/TaRh8dBQAkZhDJxg==}
     hasBin: true
 
-  '@nx/nx-darwin-arm64@19.7.3':
-    resolution: {integrity: sha512-0dDK0UkMR0vBv4AP/48Q9A+OC2dvpivdt8su/4W/CPADy69M9B5O3jPiK+jTRsLshQG/soC9JG0Rll1BNWymPg==}
+  '@nx/nx-darwin-arm64@19.7.4':
+    resolution: {integrity: sha512-EqfxGZ+4r5cv6g4xBXSfYIiwKGH9xr0EMNlMTZe7rwToqEpdirhtjuNbgWB0uiZRyeZRHlEXM6xKEEu8J6tjSA==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
 
-  '@nx/nx-darwin-x64@19.7.3':
-    resolution: {integrity: sha512-hTdv5YY2GQTdT7GwVO7ST27ZzvCmAQvmkEapfnCdy74QsL4gapaXJFvtWLHVfG6qHNRHWXbpdegvR3VswRHZVQ==}
+  '@nx/nx-darwin-x64@19.7.4':
+    resolution: {integrity: sha512-rqYjJiomI0kPjnUVJLnu5mQjyuWUbGA72RTEZ19XltJAbTssAMS4TtUY6YlW5LcjuVfKLlVEtW6nuW5ULejRCA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
 
-  '@nx/nx-freebsd-x64@19.7.3':
-    resolution: {integrity: sha512-dwuB/3eoV2RbD0b0LHnagQOXa9PKAjLi7g5vNxzw6LuNT1tdaLaUZZGv2tfG0hHjsV0cOaAX41rEyOIwJyE7zg==}
+  '@nx/nx-freebsd-x64@19.7.4':
+    resolution: {integrity: sha512-2TwWRk4nyfLcyOeSAFVJsXFkIKV/l90W/S6yv5W7k2xtU8slqmZkugJ8Z90adks2yRdqY6RdTk4Lc/Y0Orh0Gw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [freebsd]
 
-  '@nx/nx-linux-arm-gnueabihf@19.7.3':
-    resolution: {integrity: sha512-X/eG3IqvIxlCfIOiCQKv7RKwra54I+SN9zj2TeSOtd/uK0paa3mYSlGUJqoP3wpzasW1+EPIGkTQqV283IA15w==}
+  '@nx/nx-linux-arm-gnueabihf@19.7.4':
+    resolution: {integrity: sha512-DpazABUWfXqBzorDDFLnIfahKQb80PJYGfmIIWvkuZNtvukHdP/XMXZUEOEu4+Q8ijBitQISPYclyzNrf4yuwQ==}
     engines: {node: '>= 10'}
     cpu: [arm]
     os: [linux]
 
-  '@nx/nx-linux-arm64-gnu@19.7.3':
-    resolution: {integrity: sha512-LNaX8DVcPlFVJhMf1AAAR6j1DZF9BlVhWlilRM44tIfnmvPfKIahKJIJbuikHE7q+lkvMrQUUDXKiQJlmm/qDw==}
+  '@nx/nx-linux-arm64-gnu@19.7.4':
+    resolution: {integrity: sha512-6vD6LKpuYf7cqnXEIqcmm1rQWWAxHxPlLww/NtT9dXkf91u922Fdb3JGcEAhB8cbCez7cazsOiulB0fQO+K78w==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
-  '@nx/nx-linux-arm64-musl@19.7.3':
-    resolution: {integrity: sha512-TJ9PqSebhrn8NfrW+wqMXB9N65U0L0Kjt8FfahWffNKtSAEUvhurbNhqna2Rt5WJe2qaVf6zN2pOHKhF/5pL0w==}
+  '@nx/nx-linux-arm64-musl@19.7.4':
+    resolution: {integrity: sha512-befwJELs3qtNbjt2gqnnDmKeQ+EAt0hihLLIgLtCZ7xLvoaJV6UodqsZ2wAOQbCZqT9CN4huFD1bi9SFZWRmPg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
-  '@nx/nx-linux-x64-gnu@19.7.3':
-    resolution: {integrity: sha512-YMb4WGGovwgxsP6VvAEnyWvLoUwsDrdE5CxFQ2yoThD2BixmSHUKLtx6dtPDHz25nOE3v1ZzM0xTwYXBhPaeRQ==}
+  '@nx/nx-linux-x64-gnu@19.7.4':
+    resolution: {integrity: sha512-ZKfVMmaBJejS1K0goHYtXyDlQZ3B4xRFkWZBFe/W56VJo5UGJpTunBo5FcT1RC9hXrT1RE6Ane6AdeTLmqi42A==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
-  '@nx/nx-linux-x64-musl@19.7.3':
-    resolution: {integrity: sha512-zkjgDSvw2eDN+KuJBPPAPhU/lOdiMvJU0UMthJFw85dhQIYfAO8+UgiFg/qBsKo0kQ0MkhntnIPBPF8bH40qWg==}
+  '@nx/nx-linux-x64-musl@19.7.4':
+    resolution: {integrity: sha512-myUwejkxak2vwlvEFeTRJjtYWSVNEMB4sc1YyPBHm3SO4lhArarkuMuFZjHHmlpU32ZIKRy4VGzTzg4m8kKf/Q==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
-  '@nx/nx-win32-arm64-msvc@19.7.3':
-    resolution: {integrity: sha512-qCTFG6VxNvEe5JfoAELGZsjWDL4G+2NVSoSS3tByJYwVX256qgALcVoUHMjpxBn9FeOvUW9w5PL4Am4PKDdXLw==}
+  '@nx/nx-win32-arm64-msvc@19.7.4':
+    resolution: {integrity: sha512-GSPCJTOBMsg3dQevGDVfBPilFPU3wR8DSgu4izJqNiBT893SQCSPtaSjsAicCpcf/wPU4kPUoOpRwnfunL2GlA==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
 
-  '@nx/nx-win32-x64-msvc@19.7.3':
-    resolution: {integrity: sha512-ULNf73gLgB5cU/O4dlQe6tetbRIROTmaUNYTUUCCAC0BqVwZwPDxn4u9C5LgiErVyfPwwAhlserCGei5taLASQ==}
+  '@nx/nx-win32-x64-msvc@19.7.4':
+    resolution: {integrity: sha512-2Je+RfNxlXBAjCJ01z+bptNkQjjXkuhWIpZmXqUNwf6VGQQL5b43CUqHAAAY1DAbO748rVeYCDU8CiOpSbhslg==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
@@ -1020,6 +1059,11 @@ packages:
     peerDependencies:
       '@rsbuild/core': ^1.0.1-rc.0
 
+  '@rsbuild/plugin-react@1.0.1-rc.4':
+    resolution: {integrity: sha512-1EPBjVgBPd9eQk0rDgm78q/vQDKabTP24+vUKz02iYZDZZPfCRyZrfF3GvKLVJXRW44JqT51ykK9t9oxw/tDtA==}
+    peerDependencies:
+      '@rsbuild/core': ^1.0.1-rc.4
+
   '@rsbuild/plugin-react@1.0.2':
     resolution: {integrity: sha512-8Sa4AJ43/ift7ZW1iNMA38ZIEDXNINPa8rGI38u7b42yBgMUWBan8yDjFYAC0Gkg3lh8vCWYVQYZp0RyIS7lqA==}
     peerDependencies:
@@ -3020,8 +3064,8 @@ packages:
   number-precision@1.6.0:
     resolution: {integrity: sha512-05OLPgbgmnixJw+VvEh18yNPUo3iyp4BEWJcrLu4X9W05KmMifN7Mu5exYvQXqxxeNWhvIF+j3Rij+HmddM/hQ==}
 
-  nx@19.7.3:
-    resolution: {integrity: sha512-8F4CzKavSuOFv+uKVwXHc00Px0q40CWAYCW6NC5IgU3AMaJVumyHzgB8Sn+yfkaVgfVnZVqznOsyrbZUWuj/VA==}
+  nx@19.7.4:
+    resolution: {integrity: sha512-xvOUQp+jZHtXr7MYF8RdtY2fAz7vzPK58l3o73Wo4LpfFFULIPVF+f33TT1jyAQCez/tsDc9fBOSycr86df+5w==}
     hasBin: true
     peerDependencies:
       '@swc-node/register': ^1.8.0
@@ -4692,43 +4736,43 @@ snapshots:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.17.1
 
-  '@nrwl/tao@19.7.3':
+  '@nrwl/tao@19.7.4':
     dependencies:
-      nx: 19.7.3
+      nx: 19.7.4
       tslib: 2.6.3
     transitivePeerDependencies:
       - '@swc-node/register'
       - '@swc/core'
       - debug
 
-  '@nx/nx-darwin-arm64@19.7.3':
+  '@nx/nx-darwin-arm64@19.7.4':
     optional: true
 
-  '@nx/nx-darwin-x64@19.7.3':
+  '@nx/nx-darwin-x64@19.7.4':
     optional: true
 
-  '@nx/nx-freebsd-x64@19.7.3':
+  '@nx/nx-freebsd-x64@19.7.4':
     optional: true
 
-  '@nx/nx-linux-arm-gnueabihf@19.7.3':
+  '@nx/nx-linux-arm-gnueabihf@19.7.4':
     optional: true
 
-  '@nx/nx-linux-arm64-gnu@19.7.3':
+  '@nx/nx-linux-arm64-gnu@19.7.4':
     optional: true
 
-  '@nx/nx-linux-arm64-musl@19.7.3':
+  '@nx/nx-linux-arm64-musl@19.7.4':
     optional: true
 
-  '@nx/nx-linux-x64-gnu@19.7.3':
+  '@nx/nx-linux-x64-gnu@19.7.4':
     optional: true
 
-  '@nx/nx-linux-x64-musl@19.7.3':
+  '@nx/nx-linux-x64-musl@19.7.4':
     optional: true
 
-  '@nx/nx-win32-arm64-msvc@19.7.3':
+  '@nx/nx-win32-arm64-msvc@19.7.4':
     optional: true
 
-  '@nx/nx-win32-x64-msvc@19.7.3':
+  '@nx/nx-win32-x64-msvc@19.7.4':
     optional: true
 
   '@pkgr/core@0.1.1': {}
@@ -4829,6 +4873,12 @@ snapshots:
       '@rspack/plugin-react-refresh': 1.0.0(react-refresh@0.14.2)
       react-refresh: 0.14.2
 
+  '@rsbuild/plugin-react@1.0.1-rc.4(@rsbuild/core@1.0.4)':
+    dependencies:
+      '@rsbuild/core': 1.0.4
+      '@rspack/plugin-react-refresh': 1.0.0(react-refresh@0.14.2)
+      react-refresh: 0.14.2
+
   '@rsbuild/plugin-react@1.0.2(@rsbuild/core@1.0.4)':
     dependencies:
       '@rsbuild/core': 1.0.4
@@ -7217,10 +7267,10 @@ snapshots:
 
   number-precision@1.6.0: {}
 
-  nx@19.7.3:
+  nx@19.7.4:
     dependencies:
       '@napi-rs/wasm-runtime': 0.2.4
-      '@nrwl/tao': 19.7.3
+      '@nrwl/tao': 19.7.4
       '@yarnpkg/lockfile': 1.1.0
       '@yarnpkg/parsers': 3.0.0-rc.46
       '@zkochan/js-yaml': 0.0.7
@@ -7255,16 +7305,16 @@ snapshots:
       yargs: 17.7.2
       yargs-parser: 21.1.1
     optionalDependencies:
-      '@nx/nx-darwin-arm64': 19.7.3
-      '@nx/nx-darwin-x64': 19.7.3
-      '@nx/nx-freebsd-x64': 19.7.3
-      '@nx/nx-linux-arm-gnueabihf': 19.7.3
-      '@nx/nx-linux-arm64-gnu': 19.7.3
-      '@nx/nx-linux-arm64-musl': 19.7.3
-      '@nx/nx-linux-x64-gnu': 19.7.3
-      '@nx/nx-linux-x64-musl': 19.7.3
-      '@nx/nx-win32-arm64-msvc': 19.7.3
-      '@nx/nx-win32-x64-msvc': 19.7.3
+      '@nx/nx-darwin-arm64': 19.7.4
+      '@nx/nx-darwin-x64': 19.7.4
+      '@nx/nx-freebsd-x64': 19.7.4
+      '@nx/nx-linux-arm-gnueabihf': 19.7.4
+      '@nx/nx-linux-arm64-gnu': 19.7.4
+      '@nx/nx-linux-arm64-musl': 19.7.4
+      '@nx/nx-linux-x64-gnu': 19.7.4
+      '@nx/nx-linux-x64-musl': 19.7.4
+      '@nx/nx-win32-arm64-msvc': 19.7.4
+      '@nx/nx-win32-x64-msvc': 19.7.4
     transitivePeerDependencies:
       - debug