diff --git a/packages/compat/webpack/package.json b/packages/compat/webpack/package.json
index 41b9f8e719..1f69512e3f 100644
--- a/packages/compat/webpack/package.json
+++ b/packages/compat/webpack/package.json
@@ -38,7 +38,6 @@
     "html-webpack-plugin": "npm:html-rspack-plugin@5.5.7",
     "mini-css-extract-plugin": "2.7.6",
     "postcss": "8.4.31",
-    "style-loader": "3.3.3",
     "terser-webpack-plugin": "5.3.9",
     "tsconfig-paths-webpack-plugin": "4.1.0",
     "webpack": "^5.89.0",
diff --git a/packages/compat/webpack/src/plugins/css.ts b/packages/compat/webpack/src/plugins/css.ts
index 60dedb2a76..8262f2a374 100644
--- a/packages/compat/webpack/src/plugins/css.ts
+++ b/packages/compat/webpack/src/plugins/css.ts
@@ -78,7 +78,7 @@ export async function applyBaseCSSRule({
 
       rule
         .use(CHAIN_ID.USE.STYLE)
-        .loader(require.resolve('style-loader'))
+        .loader(getSharedPkgCompiledPath('style-loader'))
         .options(styleLoaderOptions)
         .end();
     }
diff --git a/packages/core/src/provider/plugins/css.ts b/packages/core/src/provider/plugins/css.ts
index 95e9d125e9..4a307379a7 100644
--- a/packages/core/src/provider/plugins/css.ts
+++ b/packages/core/src/provider/plugins/css.ts
@@ -69,7 +69,7 @@ export async function applyBaseCSSRule({
 
       rule
         .use(CHAIN_ID.USE.STYLE)
-        .loader(require.resolve('style-loader'))
+        .loader(getSharedPkgCompiledPath('style-loader'))
         .options(styleLoaderOptions)
         .end();
 
diff --git a/packages/core/tests/rspack-provider/plugins/__snapshots__/css.test.ts.snap b/packages/core/tests/rspack-provider/plugins/__snapshots__/css.test.ts.snap
index 815e2db29c..1bec87d6f0 100644
--- a/packages/core/tests/rspack-provider/plugins/__snapshots__/css.test.ts.snap
+++ b/packages/core/tests/rspack-provider/plugins/__snapshots__/css.test.ts.snap
@@ -391,7 +391,7 @@ exports[`plugin-css injectStyles > should use css-loader + style-loader when inj
         "test": /\\\\\\.css\\$/,
         "use": [
           {
-            "loader": "<ROOT>/node_modules/<PNPM_INNER>/style-loader/dist/cjs.js",
+            "loader": "<ROOT>/packages/shared/compiled/style-loader",
             "options": {
               "esModule": false,
             },
@@ -576,7 +576,7 @@ exports[`plugin-less > should add less-loader and css-loader when injectStyles 1
         "test": /\\\\\\.less\\$/,
         "use": [
           {
-            "loader": "<ROOT>/node_modules/<PNPM_INNER>/style-loader/dist/cjs.js",
+            "loader": "<ROOT>/packages/shared/compiled/style-loader",
             "options": {
               "esModule": false,
             },
@@ -1019,7 +1019,7 @@ exports[`plugin-sass > should add sass-loader and css-loader when injectStyles 1
         "test": /\\\\\\.s\\(\\?:a\\|c\\)ss\\$/,
         "use": [
           {
-            "loader": "<ROOT>/node_modules/<PNPM_INNER>/style-loader/dist/cjs.js",
+            "loader": "<ROOT>/packages/shared/compiled/style-loader",
             "options": {
               "esModule": false,
             },
diff --git a/packages/shared/compiled/style-loader/index.d.ts b/packages/shared/compiled/style-loader/index.d.ts
new file mode 100644
index 0000000000..a2ac5f9bc2
--- /dev/null
+++ b/packages/shared/compiled/style-loader/index.d.ts
@@ -0,0 +1 @@
+export = any;
diff --git a/packages/shared/compiled/style-loader/index.js b/packages/shared/compiled/style-loader/index.js
new file mode 100644
index 0000000000..c27269fbf3
--- /dev/null
+++ b/packages/shared/compiled/style-loader/index.js
@@ -0,0 +1 @@
+(()=>{"use strict";var t={529:(t,e,n)=>{const o=n(161);t.exports=o.default},161:(t,e,n)=>{Object.defineProperty(e,"__esModule",{value:true});e["default"]=void 0;var o=_interopRequireDefault(n(17));var r=n(931);var i=_interopRequireDefault(n(80));function _interopRequireDefault(t){return t&&t.__esModule?t:{default:t}}const s=function loader(t){if(this._compiler&&this._compiler.options&&this._compiler.options.experiments&&this._compiler.options.experiments.css&&this._module&&this._module.type==="css"){return t}};s.pitch=function pitch(t){if(this._compiler&&this._compiler.options&&this._compiler.options.experiments&&this._compiler.options.experiments.css&&this._module&&this._module.type==="css"){this.emitWarning(new Error('You can\'t use `experiments.css` (`experiments.futureDefaults` enable built-in CSS support by default) and `style-loader` together, please set `experiments.css` to `false` or set `{ type: "javascript/auto" }` for rules with `style-loader` in your webpack config (now `style-loader` does nothing).'));return}const e=this.getOptions(i.default);const n=e.injectType||"styleTag";const s=typeof e.esModule!=="undefined"?e.esModule:true;const l={};if(e.attributes){l.attributes=e.attributes}if(e.base){l.base=e.base}const a=typeof e.insert==="function"?"function":e.insert&&o.default.isAbsolute(e.insert)?"module-path":"selector";const u=typeof e.styleTagTransform==="function"?"function":e.styleTagTransform&&o.default.isAbsolute(e.styleTagTransform)?"module-path":"default";switch(n){case"linkTag":{const n=this.hot?(0,r.getLinkHmrCode)(s,this,t):"";return`\n      ${(0,r.getImportLinkAPICode)(s,this)}\n      ${(0,r.getImportInsertBySelectorCode)(s,this,a,e)}\n      ${(0,r.getImportLinkContentCode)(s,this,t)}\n      ${s?"":`content = content.__esModule ? content.default : content;`}\n\nvar options = ${JSON.stringify(l)};\n\n${(0,r.getInsertOptionCode)(a,e)}\n\nvar update = API(content, options);\n\n${n}\n\n${s?"export default {}":""}`}case"lazyStyleTag":case"lazyAutoStyleTag":case"lazySingletonStyleTag":{const o=n==="lazySingletonStyleTag";const i=n==="lazyAutoStyleTag";const d=this.hot?(0,r.getStyleHmrCode)(s,this,t,true):"";return`\n      var exported = {};\n\n      ${(0,r.getImportStyleAPICode)(s,this)}\n      ${(0,r.getImportStyleDomAPICode)(s,this,o,i)}\n      ${(0,r.getImportInsertBySelectorCode)(s,this,a,e)}\n      ${(0,r.getSetAttributesCode)(s,this,e)}\n      ${(0,r.getImportInsertStyleElementCode)(s,this)}\n      ${(0,r.getStyleTagTransformFnCode)(s,this,e,o,u)}\n      ${(0,r.getImportStyleContentCode)(s,this,t)}\n      ${i?(0,r.getImportIsOldIECode)(s,this):""}\n      ${s?`if (content && content.locals) {\n              exported.locals = content.locals;\n            }\n            `:`content = content.__esModule ? content.default : content;\n\n            exported.locals = content.locals || {};`}\n\nvar refs = 0;\nvar update;\nvar options = ${JSON.stringify(l)};\n\n${(0,r.getStyleTagTransformFn)(e,o)};\noptions.setAttributes = setAttributes;\n${(0,r.getInsertOptionCode)(a,e)}\noptions.domAPI = ${(0,r.getdomAPI)(i)};\noptions.insertStyleElement = insertStyleElement;\n\nexported.use = function(insertOptions) {\n  options.options = insertOptions || {};\n\n  if (!(refs++)) {\n    update = API(content, options);\n  }\n\n  return exported;\n};\nexported.unuse = function() {\n  if (refs > 0 && !--refs) {\n    update();\n    update = null;\n  }\n};\n\n${d}\n\n${(0,r.getExportLazyStyleCode)(s,this,t)}\n`}case"styleTag":case"autoStyleTag":case"singletonStyleTag":default:{const o=n==="singletonStyleTag";const i=n==="autoStyleTag";const d=this.hot?(0,r.getStyleHmrCode)(s,this,t,false):"";return`\n      ${(0,r.getImportStyleAPICode)(s,this)}\n      ${(0,r.getImportStyleDomAPICode)(s,this,o,i)}\n      ${(0,r.getImportInsertBySelectorCode)(s,this,a,e)}\n      ${(0,r.getSetAttributesCode)(s,this,e)}\n      ${(0,r.getImportInsertStyleElementCode)(s,this)}\n      ${(0,r.getStyleTagTransformFnCode)(s,this,e,o,u)}\n      ${(0,r.getImportStyleContentCode)(s,this,t)}\n      ${i?(0,r.getImportIsOldIECode)(s,this):""}\n      ${s?"":`content = content.__esModule ? content.default : content;`}\n\nvar options = ${JSON.stringify(l)};\n\n${(0,r.getStyleTagTransformFn)(e,o)};\noptions.setAttributes = setAttributes;\n${(0,r.getInsertOptionCode)(a,e)}\noptions.domAPI = ${(0,r.getdomAPI)(i)};\noptions.insertStyleElement = insertStyleElement;\n\nvar update = API(content, options);\n\n${d}\n\n${(0,r.getExportStyleCode)(s,this,t)}\n`}}};var l=s;e["default"]=l},163:t=>{function isEqualLocals(t,e,n){if(!t&&e||t&&!e){return false}var o;for(o in t){if(n&&o==="default"){continue}if(t[o]!==e[o]){return false}}for(o in e){if(n&&o==="default"){continue}if(!t[o]){return false}}return true}t.exports=isEqualLocals},931:(t,e,n)=>{Object.defineProperty(e,"__esModule",{value:true});e.getExportLazyStyleCode=getExportLazyStyleCode;e.getExportStyleCode=getExportStyleCode;e.getImportInsertBySelectorCode=getImportInsertBySelectorCode;e.getImportInsertStyleElementCode=getImportInsertStyleElementCode;e.getImportIsOldIECode=getImportIsOldIECode;e.getImportLinkAPICode=getImportLinkAPICode;e.getImportLinkContentCode=getImportLinkContentCode;e.getImportStyleAPICode=getImportStyleAPICode;e.getImportStyleContentCode=getImportStyleContentCode;e.getImportStyleDomAPICode=getImportStyleDomAPICode;e.getInsertOptionCode=getInsertOptionCode;e.getLinkHmrCode=getLinkHmrCode;e.getSetAttributesCode=getSetAttributesCode;e.getStyleHmrCode=getStyleHmrCode;e.getStyleTagTransformFn=getStyleTagTransformFn;e.getStyleTagTransformFnCode=getStyleTagTransformFnCode;e.getdomAPI=getdomAPI;e.stringifyRequest=stringifyRequest;var o=_interopRequireDefault(n(17));var r=_interopRequireDefault(n(163));function _interopRequireDefault(t){return t&&t.__esModule?t:{default:t}}const i=/^\.\.?[/\\]/;function isAbsolutePath(t){return o.default.posix.isAbsolute(t)||o.default.win32.isAbsolute(t)}function isRelativePath(t){return i.test(t)}function stringifyRequest(t,e){if(typeof t.utils!=="undefined"&&typeof t.utils.contextify==="function"){return JSON.stringify(t.utils.contextify(t.context,e))}const n=e.split("!");const{context:r}=t;return JSON.stringify(n.map((t=>{const e=t.match(/^(.*?)(\?.*)/);const n=e?e[2]:"";let i=e?e[1]:t;if(isAbsolutePath(i)&&r){i=o.default.relative(r,i);if(isAbsolutePath(i)){return i+n}if(isRelativePath(i)===false){i=`./${i}`}}return i.replace(/\\/g,"/")+n})).join("!"))}function getImportLinkAPICode(t,e){const n=stringifyRequest(e,`!${o.default.join(__dirname,"runtime/injectStylesIntoLinkTag.js")}`);return t?`import API from ${n};`:`var API = require(${n});`}function getImportLinkContentCode(t,e,n){const o=stringifyRequest(e,`!!${n}`);return t?`import content from ${o};`:`var content = require(${o});`}function getImportStyleAPICode(t,e){const n=stringifyRequest(e,`!${o.default.join(__dirname,"runtime/injectStylesIntoStyleTag.js")}`);return t?`import API from ${n};`:`var API = require(${n});`}function getImportStyleDomAPICode(t,e,n,r){const i=stringifyRequest(e,`!${o.default.join(__dirname,"runtime/styleDomAPI.js")}`);const s=stringifyRequest(e,`!${o.default.join(__dirname,"runtime/singletonStyleDomAPI.js")}`);if(r){return t?`import domAPI from ${i};\n        import domAPISingleton from ${s};`:`var domAPI = require(${i});\n        var domAPISingleton = require(${s});`}return t?`import domAPI from ${n?s:i};`:`var domAPI = require(${n?s:i});`}function getImportStyleContentCode(t,e,n){const o=stringifyRequest(e,`!!${n}`);return t?`import content, * as namedExport from ${o};`:`var content = require(${o});`}function getImportInsertBySelectorCode(t,e,n,r){if(n==="selector"){const n=stringifyRequest(e,`!${o.default.join(__dirname,"runtime/insertBySelector.js")}`);return t?`import insertFn from ${n};`:`var insertFn = require(${n});`}if(n==="module-path"){const n=stringifyRequest(e,`${r.insert}`);e.addBuildDependency(r.insert);return t?`import insertFn from ${n};`:`var insertFn = require(${n});`}return""}function getInsertOptionCode(t,e){if(t==="selector"){const t=e.insert?JSON.stringify(e.insert):'"head"';return`\n      options.insert = insertFn.bind(null, ${t});\n    `}if(t==="module-path"){return`options.insert = insertFn;`}return`options.insert = ${e.insert.toString()};`}function getImportInsertStyleElementCode(t,e){const n=stringifyRequest(e,`!${o.default.join(__dirname,"runtime/insertStyleElement.js")}`);return t?`import insertStyleElement from ${n};`:`var insertStyleElement = require(${n});`}function getStyleHmrCode(t,e,n,o){const i=stringifyRequest(e,`!!${n}`);return`\nif (module.hot) {\n  if (!content.locals || module.hot.invalidate) {\n    var isEqualLocals = ${r.default.toString()};\n    var isNamedExport = ${t?"!content.locals":false};\n    var oldLocals = isNamedExport ? namedExport : content.locals;\n\n    module.hot.accept(\n      ${i},\n      function () {\n        ${t?`if (!isEqualLocals(oldLocals, isNamedExport ? namedExport : content.locals, isNamedExport)) {\n                module.hot.invalidate();\n\n                return;\n              }\n\n              oldLocals = isNamedExport ? namedExport : content.locals;\n\n              ${o?`if (update && refs > 0) {\n                      update(content);\n                    }`:`update(content);`}`:`content = require(${i});\n\n              content = content.__esModule ? content.default : content;\n\n              ${o?"":`if (typeof content === 'string') {\n                      content = [[module.id, content, '']];\n                    }`}\n\n              if (!isEqualLocals(oldLocals, content.locals)) {\n                module.hot.invalidate();\n\n                return;\n              }\n\n              oldLocals = content.locals;\n\n              ${o?`if (update && refs > 0) {\n                        update(content);\n                      }`:`update(content);`}`}\n      }\n    )\n  }\n\n  module.hot.dispose(function() {\n    ${o?`if (update) {\n            update();\n          }`:`update();`}\n  });\n}\n`}function getLinkHmrCode(t,e,n){const o=stringifyRequest(e,`!!${n}`);return`\nif (module.hot) {\n  module.hot.accept(\n    ${o},\n    function() {\n     ${t?"update(content);":`content = require(${o});\n\n           content = content.__esModule ? content.default : content;\n\n           update(content);`}\n    }\n  );\n\n  module.hot.dispose(function() {\n    update();\n  });\n}`}function getdomAPI(t){return t?"isOldIE() ? domAPISingleton : domAPI":"domAPI"}function getImportIsOldIECode(t,e){const n=stringifyRequest(e,`!${o.default.join(__dirname,"runtime/isOldIE.js")}`);return t?`import isOldIE from ${n};`:`var isOldIE = require(${n});`}function getStyleTagTransformFnCode(t,e,n,r,i){if(r){return""}if(i==="default"){const n=stringifyRequest(e,`!${o.default.join(__dirname,"runtime/styleTagTransform.js")}`);return t?`import styleTagTransformFn from ${n};`:`var styleTagTransformFn = require(${n});`}if(i==="module-path"){const o=stringifyRequest(e,`${n.styleTagTransform}`);e.addBuildDependency(n.styleTagTransform);return t?`import styleTagTransformFn from ${o};`:`var styleTagTransformFn = require(${o});`}return""}function getStyleTagTransformFn(t,e){return e?"":typeof t.styleTagTransform==="function"?`options.styleTagTransform = ${t.styleTagTransform.toString()}`:`options.styleTagTransform = styleTagTransformFn`}function getExportStyleCode(t,e,n){const o=stringifyRequest(e,`!!${n}`);return t?`export * from ${o};\n       export default content && content.locals ? content.locals : undefined;`:"module.exports = content && content.locals || {};"}function getExportLazyStyleCode(t,e,n){const o=stringifyRequest(e,`!!${n}`);return t?`export * from ${o};\n       export default exported;`:"module.exports = exported;"}function getSetAttributesCode(t,e,n){let r;if(typeof n.attributes!=="undefined"){r=n.attributes.nonce!=="undefined"?stringifyRequest(e,`!${o.default.join(__dirname,"runtime/setAttributesWithAttributesAndNonce.js")}`):stringifyRequest(e,`!${o.default.join(__dirname,"runtime/setAttributesWithAttributes.js")}`)}else{r=stringifyRequest(e,`!${o.default.join(__dirname,"runtime/setAttributesWithoutAttributes.js")}`)}return t?`import setAttributes from ${r};`:`var setAttributes = require(${r});`}},17:t=>{t.exports=require("path")},80:t=>{t.exports=JSON.parse('{"title":"Style Loader options","type":"object","properties":{"injectType":{"description":"Allows to setup how styles will be injected into DOM.","link":"https://github.com/webpack-contrib/style-loader#injecttype","enum":["styleTag","singletonStyleTag","autoStyleTag","lazyStyleTag","lazySingletonStyleTag","lazyAutoStyleTag","linkTag"]},"attributes":{"description":"Adds custom attributes to tag.","link":"https://github.com/webpack-contrib/style-loader#attributes","type":"object"},"insert":{"description":"Inserts `<style>`/`<link>` at the given position.","link":"https://github.com/webpack-contrib/style-loader#insert","anyOf":[{"type":"string"},{"instanceof":"Function"}]},"base":{"description":"Sets module ID base for DLLPlugin.","link":"https://github.com/webpack-contrib/style-loader#base","type":"number"},"esModule":{"description":"Use the ES modules syntax.","link":"https://github.com/webpack-contrib/css-loader#esmodule","type":"boolean"},"styleTagTransform":{"description":"Transform tag and css when insert \'style\' tag into the DOM","link":"https://github.com/webpack-contrib/style-loader#styleTagTransform","anyOf":[{"type":"string"},{"instanceof":"Function"}]}},"additionalProperties":false}')}};var e={};function __nccwpck_require__(n){var o=e[n];if(o!==undefined){return o.exports}var r=e[n]={exports:{}};var i=true;try{t[n](r,r.exports,__nccwpck_require__);i=false}finally{if(i)delete e[n]}return r.exports}if(typeof __nccwpck_require__!=="undefined")__nccwpck_require__.ab=__dirname+"/";var n=__nccwpck_require__(529);module.exports=n})();
\ No newline at end of file
diff --git a/packages/shared/compiled/style-loader/license b/packages/shared/compiled/style-loader/license
new file mode 100644
index 0000000000..8c11fc7289
--- /dev/null
+++ b/packages/shared/compiled/style-loader/license
@@ -0,0 +1,20 @@
+Copyright JS Foundation and other contributors
+
+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/shared/compiled/style-loader/package.json b/packages/shared/compiled/style-loader/package.json
new file mode 100644
index 0000000000..b43abc3dbe
--- /dev/null
+++ b/packages/shared/compiled/style-loader/package.json
@@ -0,0 +1 @@
+{"name":"style-loader","author":"Tobias Koppers @sokra","version":"3.3.3","funding":{"type":"opencollective","url":"https://opencollective.com/webpack"},"license":"MIT","types":"index.d.ts","type":"commonjs"}
diff --git a/packages/shared/compiled/style-loader/runtime/injectStylesIntoLinkTag.js b/packages/shared/compiled/style-loader/runtime/injectStylesIntoLinkTag.js
new file mode 100644
index 0000000000..d3d68a7c22
--- /dev/null
+++ b/packages/shared/compiled/style-loader/runtime/injectStylesIntoLinkTag.js
@@ -0,0 +1,29 @@
+"use strict";
+
+module.exports = function (url, options) {
+  if (typeof document === "undefined") {
+    return function () {};
+  }
+  options = options || {};
+  options.attributes = typeof options.attributes === "object" ? options.attributes : {};
+  if (typeof options.attributes.nonce === "undefined") {
+    var nonce = typeof __webpack_nonce__ !== "undefined" ? __webpack_nonce__ : null;
+    if (nonce) {
+      options.attributes.nonce = nonce;
+    }
+  }
+  var linkElement = document.createElement("link");
+  linkElement.rel = "stylesheet";
+  linkElement.href = url;
+  Object.keys(options.attributes).forEach(function (key) {
+    linkElement.setAttribute(key, options.attributes[key]);
+  });
+  options.insert(linkElement);
+  return function (newUrl) {
+    if (typeof newUrl === "string") {
+      linkElement.href = newUrl;
+    } else {
+      linkElement.parentNode.removeChild(linkElement);
+    }
+  };
+};
\ No newline at end of file
diff --git a/packages/shared/compiled/style-loader/runtime/injectStylesIntoStyleTag.js b/packages/shared/compiled/style-loader/runtime/injectStylesIntoStyleTag.js
new file mode 100644
index 0000000000..6dbfe53950
--- /dev/null
+++ b/packages/shared/compiled/style-loader/runtime/injectStylesIntoStyleTag.js
@@ -0,0 +1,84 @@
+"use strict";
+
+var stylesInDOM = [];
+function getIndexByIdentifier(identifier) {
+  var result = -1;
+  for (var i = 0; i < stylesInDOM.length; i++) {
+    if (stylesInDOM[i].identifier === identifier) {
+      result = i;
+      break;
+    }
+  }
+  return result;
+}
+function modulesToDom(list, options) {
+  var idCountMap = {};
+  var identifiers = [];
+  for (var i = 0; i < list.length; i++) {
+    var item = list[i];
+    var id = options.base ? item[0] + options.base : item[0];
+    var count = idCountMap[id] || 0;
+    var identifier = "".concat(id, " ").concat(count);
+    idCountMap[id] = count + 1;
+    var indexByIdentifier = getIndexByIdentifier(identifier);
+    var obj = {
+      css: item[1],
+      media: item[2],
+      sourceMap: item[3],
+      supports: item[4],
+      layer: item[5]
+    };
+    if (indexByIdentifier !== -1) {
+      stylesInDOM[indexByIdentifier].references++;
+      stylesInDOM[indexByIdentifier].updater(obj);
+    } else {
+      var updater = addElementStyle(obj, options);
+      options.byIndex = i;
+      stylesInDOM.splice(i, 0, {
+        identifier: identifier,
+        updater: updater,
+        references: 1
+      });
+    }
+    identifiers.push(identifier);
+  }
+  return identifiers;
+}
+function addElementStyle(obj, options) {
+  var api = options.domAPI(options);
+  api.update(obj);
+  var updater = function updater(newObj) {
+    if (newObj) {
+      if (newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap && newObj.supports === obj.supports && newObj.layer === obj.layer) {
+        return;
+      }
+      api.update(obj = newObj);
+    } else {
+      api.remove();
+    }
+  };
+  return updater;
+}
+module.exports = function (list, options) {
+  options = options || {};
+  list = list || [];
+  var lastIdentifiers = modulesToDom(list, options);
+  return function update(newList) {
+    newList = newList || [];
+    for (var i = 0; i < lastIdentifiers.length; i++) {
+      var identifier = lastIdentifiers[i];
+      var index = getIndexByIdentifier(identifier);
+      stylesInDOM[index].references--;
+    }
+    var newLastIdentifiers = modulesToDom(newList, options);
+    for (var _i = 0; _i < lastIdentifiers.length; _i++) {
+      var _identifier = lastIdentifiers[_i];
+      var _index = getIndexByIdentifier(_identifier);
+      if (stylesInDOM[_index].references === 0) {
+        stylesInDOM[_index].updater();
+        stylesInDOM.splice(_index, 1);
+      }
+    }
+    lastIdentifiers = newLastIdentifiers;
+  };
+};
\ No newline at end of file
diff --git a/packages/shared/compiled/style-loader/runtime/insertBySelector.js b/packages/shared/compiled/style-loader/runtime/insertBySelector.js
new file mode 100644
index 0000000000..08ed04d4a4
--- /dev/null
+++ b/packages/shared/compiled/style-loader/runtime/insertBySelector.js
@@ -0,0 +1,34 @@
+"use strict";
+
+var memo = {};
+
+/* istanbul ignore next  */
+function getTarget(target) {
+  if (typeof memo[target] === "undefined") {
+    var styleTarget = document.querySelector(target);
+
+    // Special case to return head of iframe instead of iframe itself
+    if (window.HTMLIFrameElement && styleTarget instanceof window.HTMLIFrameElement) {
+      try {
+        // This will throw an exception if access to iframe is blocked
+        // due to cross-origin restrictions
+        styleTarget = styleTarget.contentDocument.head;
+      } catch (e) {
+        // istanbul ignore next
+        styleTarget = null;
+      }
+    }
+    memo[target] = styleTarget;
+  }
+  return memo[target];
+}
+
+/* istanbul ignore next  */
+function insertBySelector(insert, style) {
+  var target = getTarget(insert);
+  if (!target) {
+    throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");
+  }
+  target.appendChild(style);
+}
+module.exports = insertBySelector;
\ No newline at end of file
diff --git a/packages/shared/compiled/style-loader/runtime/insertStyleElement.js b/packages/shared/compiled/style-loader/runtime/insertStyleElement.js
new file mode 100644
index 0000000000..5f4f0d6371
--- /dev/null
+++ b/packages/shared/compiled/style-loader/runtime/insertStyleElement.js
@@ -0,0 +1,10 @@
+"use strict";
+
+/* istanbul ignore next  */
+function insertStyleElement(options) {
+  var element = document.createElement("style");
+  options.setAttributes(element, options.attributes);
+  options.insert(element, options.options);
+  return element;
+}
+module.exports = insertStyleElement;
\ No newline at end of file
diff --git a/packages/shared/compiled/style-loader/runtime/isEqualLocals.js b/packages/shared/compiled/style-loader/runtime/isEqualLocals.js
new file mode 100644
index 0000000000..3844b660ca
--- /dev/null
+++ b/packages/shared/compiled/style-loader/runtime/isEqualLocals.js
@@ -0,0 +1,28 @@
+"use strict";
+
+function isEqualLocals(a, b, isNamedExport) {
+  if (!a && b || a && !b) {
+    return false;
+  }
+  var p;
+  for (p in a) {
+    if (isNamedExport && p === "default") {
+      // eslint-disable-next-line no-continue
+      continue;
+    }
+    if (a[p] !== b[p]) {
+      return false;
+    }
+  }
+  for (p in b) {
+    if (isNamedExport && p === "default") {
+      // eslint-disable-next-line no-continue
+      continue;
+    }
+    if (!a[p]) {
+      return false;
+    }
+  }
+  return true;
+}
+module.exports = isEqualLocals;
\ No newline at end of file
diff --git a/packages/shared/compiled/style-loader/runtime/isOldIE.js b/packages/shared/compiled/style-loader/runtime/isOldIE.js
new file mode 100644
index 0000000000..edaf0cc52f
--- /dev/null
+++ b/packages/shared/compiled/style-loader/runtime/isOldIE.js
@@ -0,0 +1,17 @@
+"use strict";
+
+var memo;
+
+/* istanbul ignore next  */
+function isOldIE() {
+  if (typeof memo === "undefined") {
+    // Test for IE <= 9 as proposed by Browserhacks
+    // @see http://browserhacks.com/#hack-e71d8692f65334173fee715c222cb805
+    // Tests for existence of standard globals is to allow style-loader
+    // to operate correctly into non-standard environments
+    // @see https://github.com/webpack-contrib/style-loader/issues/177
+    memo = Boolean(typeof window !== "undefined" && typeof document !== "undefined" && document.all && !window.atob);
+  }
+  return memo;
+}
+module.exports = isOldIE;
\ No newline at end of file
diff --git a/packages/shared/compiled/style-loader/runtime/setAttributesWithAttributes.js b/packages/shared/compiled/style-loader/runtime/setAttributesWithAttributes.js
new file mode 100644
index 0000000000..df7bc8b920
--- /dev/null
+++ b/packages/shared/compiled/style-loader/runtime/setAttributesWithAttributes.js
@@ -0,0 +1,13 @@
+"use strict";
+
+/* istanbul ignore next  */
+function setAttributesWithoutAttributes(styleElement, attributes) {
+  var nonce = typeof __webpack_nonce__ !== "undefined" ? __webpack_nonce__ : null;
+  if (nonce) {
+    attributes.nonce = nonce;
+  }
+  Object.keys(attributes).forEach(function (key) {
+    styleElement.setAttribute(key, attributes[key]);
+  });
+}
+module.exports = setAttributesWithoutAttributes;
\ No newline at end of file
diff --git a/packages/shared/compiled/style-loader/runtime/setAttributesWithAttributesAndNonce.js b/packages/shared/compiled/style-loader/runtime/setAttributesWithAttributesAndNonce.js
new file mode 100644
index 0000000000..5267b28654
--- /dev/null
+++ b/packages/shared/compiled/style-loader/runtime/setAttributesWithAttributesAndNonce.js
@@ -0,0 +1,9 @@
+"use strict";
+
+/* istanbul ignore next  */
+function setAttributesWithoutAttributes(styleElement, attributes) {
+  Object.keys(attributes).forEach(function (key) {
+    styleElement.setAttribute(key, attributes[key]);
+  });
+}
+module.exports = setAttributesWithoutAttributes;
\ No newline at end of file
diff --git a/packages/shared/compiled/style-loader/runtime/setAttributesWithoutAttributes.js b/packages/shared/compiled/style-loader/runtime/setAttributesWithoutAttributes.js
new file mode 100644
index 0000000000..f7a9c52d7a
--- /dev/null
+++ b/packages/shared/compiled/style-loader/runtime/setAttributesWithoutAttributes.js
@@ -0,0 +1,10 @@
+"use strict";
+
+/* istanbul ignore next  */
+function setAttributesWithoutAttributes(styleElement) {
+  var nonce = typeof __webpack_nonce__ !== "undefined" ? __webpack_nonce__ : null;
+  if (nonce) {
+    styleElement.setAttribute("nonce", nonce);
+  }
+}
+module.exports = setAttributesWithoutAttributes;
\ No newline at end of file
diff --git a/packages/shared/compiled/style-loader/runtime/singletonStyleDomAPI.js b/packages/shared/compiled/style-loader/runtime/singletonStyleDomAPI.js
new file mode 100644
index 0000000000..f1e8f16836
--- /dev/null
+++ b/packages/shared/compiled/style-loader/runtime/singletonStyleDomAPI.js
@@ -0,0 +1,86 @@
+"use strict";
+
+/* istanbul ignore next  */
+var replaceText = function replaceText() {
+  var textStore = [];
+  return function replace(index, replacement) {
+    textStore[index] = replacement;
+    return textStore.filter(Boolean).join("\n");
+  };
+}();
+
+/* istanbul ignore next  */
+function apply(styleElement, index, remove, obj) {
+  var css;
+  if (remove) {
+    css = "";
+  } else {
+    css = "";
+    if (obj.supports) {
+      css += "@supports (".concat(obj.supports, ") {");
+    }
+    if (obj.media) {
+      css += "@media ".concat(obj.media, " {");
+    }
+    var needLayer = typeof obj.layer !== "undefined";
+    if (needLayer) {
+      css += "@layer".concat(obj.layer.length > 0 ? " ".concat(obj.layer) : "", " {");
+    }
+    css += obj.css;
+    if (needLayer) {
+      css += "}";
+    }
+    if (obj.media) {
+      css += "}";
+    }
+    if (obj.supports) {
+      css += "}";
+    }
+  }
+
+  // For old IE
+  /* istanbul ignore if  */
+  if (styleElement.styleSheet) {
+    styleElement.styleSheet.cssText = replaceText(index, css);
+  } else {
+    var cssNode = document.createTextNode(css);
+    var childNodes = styleElement.childNodes;
+    if (childNodes[index]) {
+      styleElement.removeChild(childNodes[index]);
+    }
+    if (childNodes.length) {
+      styleElement.insertBefore(cssNode, childNodes[index]);
+    } else {
+      styleElement.appendChild(cssNode);
+    }
+  }
+}
+var singletonData = {
+  singleton: null,
+  singletonCounter: 0
+};
+
+/* istanbul ignore next  */
+function domAPI(options) {
+  if (typeof document === "undefined") return {
+    update: function update() {},
+    remove: function remove() {}
+  };
+
+  // eslint-disable-next-line no-undef,no-use-before-define
+  var styleIndex = singletonData.singletonCounter++;
+  var styleElement =
+  // eslint-disable-next-line no-undef,no-use-before-define
+  singletonData.singleton || (
+  // eslint-disable-next-line no-undef,no-use-before-define
+  singletonData.singleton = options.insertStyleElement(options));
+  return {
+    update: function update(obj) {
+      apply(styleElement, styleIndex, false, obj);
+    },
+    remove: function remove(obj) {
+      apply(styleElement, styleIndex, true, obj);
+    }
+  };
+}
+module.exports = domAPI;
\ No newline at end of file
diff --git a/packages/shared/compiled/style-loader/runtime/styleDomAPI.js b/packages/shared/compiled/style-loader/runtime/styleDomAPI.js
new file mode 100644
index 0000000000..9fe67abffe
--- /dev/null
+++ b/packages/shared/compiled/style-loader/runtime/styleDomAPI.js
@@ -0,0 +1,61 @@
+"use strict";
+
+/* istanbul ignore next  */
+function apply(styleElement, options, obj) {
+  var css = "";
+  if (obj.supports) {
+    css += "@supports (".concat(obj.supports, ") {");
+  }
+  if (obj.media) {
+    css += "@media ".concat(obj.media, " {");
+  }
+  var needLayer = typeof obj.layer !== "undefined";
+  if (needLayer) {
+    css += "@layer".concat(obj.layer.length > 0 ? " ".concat(obj.layer) : "", " {");
+  }
+  css += obj.css;
+  if (needLayer) {
+    css += "}";
+  }
+  if (obj.media) {
+    css += "}";
+  }
+  if (obj.supports) {
+    css += "}";
+  }
+  var sourceMap = obj.sourceMap;
+  if (sourceMap && typeof btoa !== "undefined") {
+    css += "\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))), " */");
+  }
+
+  // For old IE
+  /* istanbul ignore if  */
+  options.styleTagTransform(css, styleElement, options.options);
+}
+function removeStyleElement(styleElement) {
+  // istanbul ignore if
+  if (styleElement.parentNode === null) {
+    return false;
+  }
+  styleElement.parentNode.removeChild(styleElement);
+}
+
+/* istanbul ignore next  */
+function domAPI(options) {
+  if (typeof document === "undefined") {
+    return {
+      update: function update() {},
+      remove: function remove() {}
+    };
+  }
+  var styleElement = options.insertStyleElement(options);
+  return {
+    update: function update(obj) {
+      apply(styleElement, options, obj);
+    },
+    remove: function remove() {
+      removeStyleElement(styleElement);
+    }
+  };
+}
+module.exports = domAPI;
\ No newline at end of file
diff --git a/packages/shared/compiled/style-loader/runtime/styleTagTransform.js b/packages/shared/compiled/style-loader/runtime/styleTagTransform.js
new file mode 100644
index 0000000000..c12456836e
--- /dev/null
+++ b/packages/shared/compiled/style-loader/runtime/styleTagTransform.js
@@ -0,0 +1,14 @@
+"use strict";
+
+/* istanbul ignore next  */
+function styleTagTransform(css, styleElement) {
+  if (styleElement.styleSheet) {
+    styleElement.styleSheet.cssText = css;
+  } else {
+    while (styleElement.firstChild) {
+      styleElement.removeChild(styleElement.firstChild);
+    }
+    styleElement.appendChild(document.createTextNode(css));
+  }
+}
+module.exports = styleTagTransform;
\ No newline at end of file
diff --git a/packages/shared/src/types/utils.ts b/packages/shared/src/types/utils.ts
index 8adb9378e7..be19bace48 100644
--- a/packages/shared/src/types/utils.ts
+++ b/packages/shared/src/types/utils.ts
@@ -34,6 +34,7 @@ export type SharedCompiledPkgNames =
   | 'postcss-flexbugs-fixes'
   | 'autoprefixer'
   | 'sass-loader'
+  | 'style-loader'
   | 'less-loader'
   | 'node-loader'
   | 'yaml-loader'
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6166b9e3df..1d9054f01d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -588,9 +588,6 @@ importers:
       postcss:
         specifier: 8.4.31
         version: 8.4.31
-      style-loader:
-        specifier: 3.3.3
-        version: 3.3.3(webpack@5.89.0)
       terser-webpack-plugin:
         specifier: 5.3.9
         version: 5.3.9(webpack@5.89.0)
@@ -1652,6 +1649,9 @@ importers:
       sirv:
         specifier: ^2.0.3
         version: 2.0.3
+      style-loader:
+        specifier: 3.3.3
+        version: 3.3.3(webpack@5.89.0)
       toml-loader:
         specifier: 1.0.0
         version: 1.0.0
@@ -12970,7 +12970,7 @@ packages:
       webpack: ^5.0.0
     dependencies:
       webpack: 5.89.0
-    dev: false
+    dev: true
 
   /style-to-object@0.4.4:
     resolution: {integrity: sha512-HYNoHZa2GorYNyqiCaBgsxvcJIn7OHq6inEga+E6Ke3m5JkoqpQbnFssk4jwe+K7AhGa2fcha4wSOf1Kn01dMg==}
diff --git a/scripts/prebundle/package.json b/scripts/prebundle/package.json
index 3d80ba6761..757912a02b 100644
--- a/scripts/prebundle/package.json
+++ b/scripts/prebundle/package.json
@@ -56,6 +56,7 @@
     "postcss-modules-extract-imports": "3.0.0",
     "sass-loader": "13.3.3",
     "semver": "^7.5.4",
+    "style-loader": "3.3.3",
     "toml-loader": "1.0.0",
     "rslog": "^1.1.2",
     "sirv": "^2.0.3",
diff --git a/scripts/prebundle/src/constant.ts b/scripts/prebundle/src/constant.ts
index 508462c448..b645b5dd5a 100644
--- a/scripts/prebundle/src/constant.ts
+++ b/scripts/prebundle/src/constant.ts
@@ -125,6 +125,16 @@ export const TASKS: TaskConfig[] = [
           sass: '../sass',
         },
       },
+      {
+        name: 'style-loader',
+        ignoreDts: true,
+        afterBundle: (task) => {
+          fs.copySync(
+            join(task.depPath, 'dist/runtime'),
+            join(task.distPath, 'runtime'),
+          );
+        },
+      },
       {
         name: 'less-loader',
         ignoreDts: true,