npm - @modern-js/module-tools-docs - Versions diffs - 2.7.0 → 2.7.1-beta.0 - Mend

@modern-js/module-tools-docs 2.7.0 → 2.7.1-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (153) hide show

package/doc_build/en/guide/advance/in-depth-about-dev-command.html ADDED Viewed

@@ -0,0 +1,33 @@
+<!doctype html><html  lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title data-rh="true">In-depth understanding of the dev command - Module Tools</title><meta data-rh="true" name="description" content="Module Engineering Solutions"/>
+<script id="check-dark-light">
+;(() => {
+  const saved = localStorage.getItem('modern-theme-appearance')
+  const prefereDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+  if (!saved || saved === 'auto' ? prefereDark : saved === 'dark') {
+    document.documentElement.classList.add('dark')
+  }
+})()
+</script>
+<link rel="icon" href="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/logo-1x-0104.png"><script>!function(){"use strict";var e,n,i,t,o,u={},r={};function a(e){var n=r[e];if(void 0!==n)return n.exports;var i=r[e]={exports:{}};return u[e].call(i.exports,i,i.exports,a),i.exports}a.m=u,e=[],a.O=function(n,i,t,o){if(!i){var u=1/0;for(d=0;d<e.length;d++){i=e[d][0],t=e[d][1],o=e[d][2];for(var r=!0,_=0;_<i.length;_++)(!1&o||u>=o)&&Object.keys(a.O).every((function(e){return a.O[e](i[_])}))?i.splice(_--,1):(r=!1,o<u&&(u=o));if(r){e.splice(d--,1);var c=t();void 0!==c&&(n=c)}}return n}o=o||0;for(var d=e.length;d>0&&e[d-1][2]>o;d--)e[d]=e[d-1];e[d]=[i,t,o]},a.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(n,{a:n}),n},i=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},a.t=function(e,t){if(1&t&&(e=this(e)),8&t)return e;if("object"==typeof e&&e){if(4&t&&e.__esModule)return e;if(16&t&&"function"==typeof e.then)return e}var o=Object.create(null);a.r(o);var u={};n=n||[null,i({}),i([]),i(i)];for(var r=2&t&&e;"object"==typeof r&&!~n.indexOf(r);r=i(r))Object.getOwnPropertyNames(r).forEach((function(n){u[n]=function(){return e[n]}}));return u.default=function(){return e},a.d(o,u),o},a.d=function(e,n){for(var i in n)a.o(n,i)&&!a.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:n[i]})},a.f={},a.e=function(e){return Promise.all(Object.keys(a.f).reduce((function(n,i){return a.f[i](e,n),n}),[]))},a.u=function(e){return"static/js/async/"+({229:"en_guide_intro_getting-started",237:"zh_api_config_build-config",262:"en_plugins_official-list_plugin-banner",315:"en_index",421:"zh_api_config_testing",727:"zh_guide_advance_in-depth-about-build",775:"zh_guide_basic_before-getting-started",1085:"en_api_index",1108:"zh_guide_intro_why-module-engineering-solution",1178:"zh_api_plugin-api_plugin-hooks",1180:"zh_guide_advance_theme-config",1189:"zh_api_index",1677:"en_api_plugin-api_plugin-hooks",1756:"zh_guide_basic_command-preview",1895:"zh_index",2013:"zh_guide_best-practices_components",2020:"zh_guide_basic_publish-your-project",2033:"en_guide_intro_welcome",2034:"zh_guide_intro_welcome",2097:"en_api_config_plugins",2477:"zh_plugins_official-list_plugin-import",2532:"en_guide_basic_use-micro-generator",2540:"zh_guide_advance_in-depth-about-dev-command",2556:"en_api_config_testing",2611:"zh_guide_advance_copy",2633:"zh_guide_intro_getting-started",2678:"en_guide_basic_before-getting-started",2821:"zh_guide_basic_modify-output-product",2892:"zh_plugins_guide_setup-function",3032:"en_guide_basic_publish-your-project",3415:"zh_plugins_official-list_plugin-banner",3741:"en_guide_basic_test-your-project",3806:"zh_api_config_plugins",4260:"en_guide_advance_external-dependency",4390:"zh_plugins_official-list_overview",4663:"en_guide_advance_build-umd",4695:"zh_api_config_design-system",4749:"en_plugins_guide_setup-function",4837:"zh_guide_advance_build-umd",5057:"en_guide_advance_copy",5107:"zh_guide_basic_using-storybook",5284:"zh_plugins_guide_plugin-object",5300:"en_plugins_guide_plugin-object",5532:"zh_guide_advance_external-dependency",5578:"en_guide_basic_modify-output-product",5654:"en_api_config_build-config",5723:"zh_guide_advance_asset",5966:"zh_guide_basic_test-your-project",6098:"en_guide_advance_theme-config",7241:"zh_api_config_build-preset",7294:"zh_guide_basic_use-micro-generator",7401:"en_guide_best-practices_components",7512:"en_guide_intro_why-module-engineering-solution",7571:"en_guide_basic_command-preview",8230:"en_guide_advance_asset",8687:"en_plugins_guide_getting-started",8782:"en_api_config_build-preset",8888:"en_plugins_official-list_plugin-import",8927:"en_guide_advance_in-depth-about-build",9220:"en_api_config_design-system",9479:"en_plugins_official-list_overview",9675:"en_guide_basic_using-storybook",9826:"en_guide_advance_in-depth-about-dev-command",9868:"zh_plugins_guide_getting-started"}[e]||e)+"."+{229:"fdf2a5e3",237:"e0239f0b",262:"c8fc2ef5",315:"9d8e7f26",421:"7af33726",727:"f74fb46b",775:"cb228032",1085:"e8c3584a",1108:"c5feb99d",1114:"d0e9a03f",1178:"54181e2b",1180:"9d46a256",1189:"83d48f6f",1677:"130c0839",1756:"d01b5121",1895:"bdf672c6",2013:"63e6ce1f",2020:"f1222d3a",2033:"e8402d15",2034:"e1854445",2097:"e2525188",2477:"d9e7fb77",2532:"1d9ade59",2540:"390bd229",2556:"bdfe73d2",2611:"0c87a269",2633:"ed054585",2678:"1da2f70c",2821:"511034ae",2892:"d79620be",3032:"6ffa1dcb",3415:"defbf67c",3741:"503389bd",3806:"bb32094e",4260:"21c368af",4390:"bded70c0",4663:"5912e38e",4695:"6f3e0d0a",4749:"bf63c2f5",4837:"cd0724c4",5057:"e73474a0",5107:"e684c97c",5284:"acf4be01",5300:"2799e64d",5532:"38ab900c",5578:"c1634e05",5654:"4b68a964",5723:"0abb6b82",5966:"bb4ee150",6098:"ed245a3c",7241:"af73b578",7294:"fbbfa670",7401:"db985beb",7512:"5b18a76a",7571:"16337618",8230:"29c82557",8687:"5c423f88",8782:"3c87d23b",8888:"dc5a5224",8927:"90beffab",9220:"bae5a6a4",9479:"226be4e5",9675:"2e1cf2bc",9826:"7be33ae4",9868:"d0775941"}[e]+".js"},a.miniCssF=function(e){},a.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),a.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t={},o="@modern-js/module-tools-docs:",a.l=function(e,n,i,u){if(t[e])t[e].push(n);else{var r,_;if(void 0!==i)for(var c=document.getElementsByTagName("script"),d=0;d<c.length;d++){var f=c[d];if(f.getAttribute("src")==e||f.getAttribute("data-webpack")==o+i){r=f;break}}r||(_=!0,(r=document.createElement("script")).charset="utf-8",r.timeout=120,a.nc&&r.setAttribute("nonce",a.nc),r.setAttribute("data-webpack",o+i),r.src=e),t[e]=[n];var s=function(n,i){r.onerror=r.onload=null,clearTimeout(g);var o=t[e];if(delete t[e],r.parentNode&&r.parentNode.removeChild(r),o&&o.forEach((function(e){return e(i)})),n)return n(i)},g=setTimeout(s.bind(null,void 0,{type:"timeout",target:r}),12e4);r.onerror=s.bind(null,r.onerror),r.onload=s.bind(null,r.onload),_&&document.head.appendChild(r)}},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.p="/module-tools/",function(){var e={6272:0};a.f.j=function(n,i){var t=a.o(e,n)?e[n]:void 0;if(0!==t)if(t)i.push(t[2]);else if(6272!=n){var o=new Promise((function(i,o){t=e[n]=[i,o]}));i.push(t[2]=o);var u=a.p+a.u(n),r=new Error;a.l(u,(function(i){if(a.o(e,n)&&(0!==(t=e[n])&&(e[n]=void 0),t)){var o=i&&("load"===i.type?"missing":i.type),u=i&&i.target&&i.target.src;r.message="Loading chunk "+n+" failed.\n("+o+": "+u+")",r.name="ChunkLoadError",r.type=o,r.request=u,t[1](r)}}),"chunk-"+n,n)}else e[n]=0},a.O.j=function(n){return 0===e[n]};var n=function(n,i){var t,o,u=i[0],r=i[1],_=i[2],c=0;if(u.some((function(n){return 0!==e[n]}))){for(t in r)a.o(r,t)&&(a.m[t]=r[t]);if(_)var d=_(a)}for(n&&n(i);c<u.length;c++)o=u[c],a.o(e,o)&&e[o]&&e[o][0](),e[o]=0;return a.O(d)},i=self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[];i.forEach(n.bind(null,0)),i.push=n.bind(null,i.push.bind(i))}()}();</script><script defer="defer" src="/module-tools/static/js/lib-polyfill.0d49b811.js"></script><script defer="defer" src="/module-tools/static/js/lib-lodash.5ea7bf7d.js"></script><script defer="defer" src="/module-tools/static/js/lib-react.209d3da0.js"></script><script defer="defer" src="/module-tools/static/js/lib-router.6f1082f5.js"></script><script defer="defer" src="/module-tools/static/js/9061.555c88e4.js"></script><script defer="defer" src="/module-tools/static/js/main.457dc37f.js"></script><link href="/module-tools/static/css/main.0bdbae52.css" rel="stylesheet"></head><body ><div id="root"><div><header class="top-0 left-0 relative md:fixed w-full" style="z-index:var(--modern-z-index-nav);background:var(--modern-c-bg)"><div class="dHJzp
+          csOJo"></div><div class="z0Ov1 modern-doc-nav" p="x-6"><div flex="~" justify="between" align="items-center" h="full" class="bcLAe"><div class="undefined"><a href="/module-tools/en" w="full" h="full" text="1rem" font="semibold" transition="opacity duration-300" hover="opacity-60" class="flex items-center"><span>Module Tools</span></a></div><div flex="~ 1" justify="end" align-items-center="~"><div class="LPoOT"><div flex="~ sm:1" items="center" p="sm:l-4 sm:r-2"><div class="B7xTH"><button><svg width="18" height="24" viewBox="0 0 32 32" hight="18"><path fill="var(--modern-c-gray)" d="m29 27.586l-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9a9.01 9.01 0 0 1-9-9Z"></path></svg><p class="JFbLy">Search</p><div><span>⌘</span><span>K</span></div></button></div><div class="cqbI7"><svg width="24" height="24" viewBox="0 0 32 32"><path fill="var(--modern-c-gray)" d="m29 27.586l-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9a9.01 9.01 0 0 1-9-9Z"></path></svg></div></div><div class="menu" h="14"><div text="sm" font="medium" m="x-3" class="text-brand-dark"><a class="qVky9 " target="" cursor="pointer" href="/module-tools/en/guide/intro/welcome.html">Guide</a></div><div text="sm" font="medium" m="x-3" class=""><a class="qVky9 " target="" cursor="pointer" href="/module-tools/en/api/index.html">API</a></div><div text="sm" font="medium" m="x-3" class=""><a class="qVky9 " target="" cursor="pointer" href="/module-tools/en/plugins/guide/getting-started.html">Plugins</a></div><div m="x-3" last="mr-0"><div h="14" class="relative" flex="~ center"><button flex="~ center" align="items-center" font="medium" text="sm text-1 hover:text-2" transition="color duration-200" class="nav-menu-group-button"><span m="r-1" text="sm" font="medium">v2.7.0</span><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z"></path></svg></button><div pos="top-13 right-0" m="x-0.8" transition="opacity duration-300" class="nav-menu-group-content absolute" style="opacity:0;visibility:hidden"><div class="p-3 w-full h-full min-w-128px max-h-100vh rounded-xl whitespace-nowrap bg-white" style="box-shadow:var(--modern-shadow-3);margin-right:-1.5rem;z-index:100;border:1px solid var(--modern-c-divider-light)"><div><div font="medium"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="qVky9 "><div class="rounded-md" hover="bg-mute" p="y-1.6 l-3 r-6"><div flex="~"><span m="r-1">Changelog<svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1 l-1" class="inline-block align-text-top"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></span></div></div></a></div></div><div><div font="medium"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="qVky9 "><div class="rounded-md" hover="bg-mute" p="y-1.6 l-3 r-6"><div flex="~"><span m="r-1">Contributing<svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1 l-1" class="inline-block align-text-top"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></span></div></div></a></div></div></div></div></div></div></div><div class="flex-center flex-row"><div flex="~" text="sm" font="bold" align="items-center" class="translation sjQjZ"><div m="x-1.5"><div h="14" class="relative" flex="~ center"><button flex="~ center" align="items-center" font="medium" text="sm text-1 hover:text-2" transition="color duration-200" class="nav-menu-group-button"><span m="r-1" text="sm" font="medium"><svg width="32" height="32" viewBox="0 0 32 32" w="18px" h="18px"><path fill="currentColor" d="M27.85 29H30l-6-15h-2.35l-6 15h2.15l1.6-4h6.85zm-7.65-6l2.62-6.56L25.45 23zM18 7V5h-7V2H9v3H2v2h10.74a14.71 14.71 0 0 1-3.19 6.18A13.5 13.5 0 0 1 7.26 9h-2.1a16.47 16.47 0 0 0 3 5.58A16.84 16.84 0 0 1 3 18l.75 1.86A18.47 18.47 0 0 0 9.53 16a16.92 16.92 0 0 0 5.76 3.84L16 18a14.48 14.48 0 0 1-5.12-3.37A17.64 17.64 0 0 0 14.8 7z"></path></svg></span><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z"></path></svg></button><div pos="top-13 right-0" m="x-0.8" transition="opacity duration-300" class="nav-menu-group-content absolute" style="opacity:0;visibility:hidden"><div class="p-3 w-full h-full min-w-128px max-h-100vh rounded-xl whitespace-nowrap bg-white" style="box-shadow:var(--modern-shadow-3);margin-right:-1.5rem;z-index:100;border:1px solid var(--modern-c-divider-light)"><div><div font="medium"><a class="qVky9 " target="" cursor="pointer" href="/module-tools/guide/advance/in-depth-about-dev-command"><div class="rounded-md" hover="bg-mute" p="y-1.6 l-3 r-6"><div flex="~"><span m="r-1">简体中文<svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1 l-1" class="inline-block align-text-top"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></span></div></div></a></div></div><div><div class="rounded-md" p="y-1.6 l-3"><span m="r-1" text="brand">English</span></div></div></div></div></div></div></div><div class="sjQjZ modern-doc-appearance" align-items-center="center"><button class="xSrUP undefined" id="" type="button" role="switch"><span class="CSfjI"><span class="zDdMk"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="nk0gt"><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="A1HSI"><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg></span></span></button></div><div class="social-links WIILt flex-center" pos="relative"><div h="full" flex="~" gap="x-4" align-items-center="~" transition="color duration-300"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools" target="_blank" rel="noopener noreferrer"><div class="a9VBM"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></div></a></div></div></div></div><div class="yd31b"><button class=" eE8v3"><span class="pOzTZ"><span class="aD0WQ"></span><span class="GwaZ7"></span><span class="HyMv9"></span></span></button><div class="XAjwG " id="navScreen"><div class="VrSyn"><div class="YCP7r"><div w="full" class="LiNpS"><div text="sm" font="medium" m="x-3" class="text-brand-dark"><a class="qVky9 " target="" cursor="pointer" href="/module-tools/en/guide/intro/welcome.html">Guide</a></div></div><div w="full" class="LiNpS"><div text="sm" font="medium" m="x-3" class=""><a class="qVky9 " target="" cursor="pointer" href="/module-tools/en/api/index.html">API</a></div></div><div w="full" class="LiNpS"><div text="sm" font="medium" m="x-3" class=""><a class="qVky9 " target="" cursor="pointer" href="/module-tools/en/plugins/guide/getting-started.html">Plugins</a></div></div><div w="full" class="LiNpS"><div m="x-3" last="mr-0"><div pos="relative" class=" FwXtz"><button class="YoOiJ"><span class="QFqBl">v2.7.0</span><svg width="1em" height="1em" viewBox="0 0 32 32" class=" GPyuP "><path fill="currentColor" d="M16 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z"></path></svg></button><div><div class="SEGAO"><div><div class="py-1" font="medium"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="qVky9 "><div><div flex="~"><span m="r-1">Changelog</span><svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></div></div></a></div></div><div><div class="py-1" font="medium"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="qVky9 "><div><div flex="~"><span m="r-1">Contributing</span><svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></div></div></a></div></div></div></div></div></div></div></div><div class="flex-center flex-col"><div class="mt-2 NeDxD" flex="~" justify="center"><button class="xSrUP undefined" id="" type="button" role="switch"><span class="CSfjI"><span class="zDdMk"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="nk0gt"><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="A1HSI"><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg></span></span></button></div><div flex="~" text="sm" font="bold" justify="center"><div m="x-1.5 y-1"><div pos="relative" class=" FwXtz"><button class="YoOiJ"><span class="QFqBl"><svg width="32" height="32" viewBox="0 0 32 32" w="18px" h="18px"><path fill="currentColor" d="M27.85 29H30l-6-15h-2.35l-6 15h2.15l1.6-4h6.85zm-7.65-6l2.62-6.56L25.45 23zM18 7V5h-7V2H9v3H2v2h10.74a14.71 14.71 0 0 1-3.19 6.18A13.5 13.5 0 0 1 7.26 9h-2.1a16.47 16.47 0 0 0 3 5.58A16.84 16.84 0 0 1 3 18l.75 1.86A18.47 18.47 0 0 0 9.53 16a16.92 16.92 0 0 0 5.76 3.84L16 18a14.48 14.48 0 0 1-5.12-3.37A17.64 17.64 0 0 0 14.8 7z"></path></svg></span><svg width="1em" height="1em" viewBox="0 0 32 32" class=" GPyuP "><path fill="currentColor" d="M16 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z"></path></svg></button><div><div class="SEGAO"><div><div class="py-1" font="medium"><a class="qVky9 " target="" cursor="pointer" href="/module-tools/zh"><div><div flex="~"><span m="r-1">简体中文</span><svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></div></div></a></div></div><div><div class="p-1"><span m="r-1" text="brand">English</span></div></div></div></div></div></div></div><div class="social-links WIILt flex-center" pos="relative"><div h="full" flex="~" gap="x-4" align-items-center="~" transition="color duration-300"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools" target="_blank" rel="noopener noreferrer"><div class="a9VBM"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></div></a></div></div></div></div></div><div class="B7xTH"><button><svg width="18" height="24" viewBox="0 0 32 32" hight="18"><path fill="var(--modern-c-gray)" d="m29 27.586l-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9a9.01 9.01 0 0 1-9-9Z"></path></svg><p class="JFbLy">Search</p><div><span>⌘</span><span>K</span></div></button></div><div class="cqbI7"><svg width="24" height="24" viewBox="0 0 32 32"><path fill="var(--modern-c-gray)" d="m29 27.586l-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9a9.01 9.01 0 0 1-9-9Z"></path></svg></div></div></div></div></div></header><section><div p="t-0" m="md:t-14" class="NycN9"><div class="htA00"><button flex="~ center" class="i_YqX"><div text="md" m="r-2"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M4 6h24v2H4zm0 18h24v2H4zm0-12h24v2H4zm0 6h24v2H4z"></path></svg></div><span text="sm">Menu</span></button></div><aside class="modern-scrollbar WSh16 "><div m="t-1"><nav><section block="~" class="mt-1"><div flex="~" justify="between" items-start="~" cursor="pointer" class="items-center SCFOX"><h2 p="y-1 x-2 h-8" text="sm" font="semibold" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Introduction</h2><div p="2" class="DO2xf"><div cursor-pointer="~" style="transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16L12 26l-1.4-1.4l8.6-8.6l-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="transition-opacity duration-500 ease-in-out" style="opacity:1"><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/intro/welcome.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Welcome to Module Tools</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/intro/why-module-engineering-solution.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Why module project solution</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/intro/getting-started.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Quick Start</div></a></div></div></div></section><section block="~" class="mt-1"><div flex="~" justify="between" items-start="~" cursor="pointer" class="items-center SCFOX"><h2 p="y-1 x-2 h-8" text="sm" font="semibold" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Basic Guide</h2><div p="2" class="DO2xf"><div cursor-pointer="~" style="transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16L12 26l-1.4-1.4l8.6-8.6l-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="transition-opacity duration-500 ease-in-out" style="opacity:1"><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/basic/before-getting-started.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Before you start</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/basic/command-preview.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Command Preview</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/basic/modify-output-product.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">modify-output-product</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/basic/use-micro-generator.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Using the Microgenerator</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/basic/using-storybook.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Using Storybook</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/basic/test-your-project.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Testing Projects</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/basic/publish-your-project.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Versioning and Publishing</div></a></div></div></div></section><section block="~" class="mt-1"><div flex="~" justify="between" items-start="~" cursor="pointer" class="items-center SCFOX"><h2 p="y-1 x-2 h-8" text="sm" font="semibold" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Advanced Guide</h2><div p="2" class="DO2xf"><div cursor-pointer="~" style="transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16L12 26l-1.4-1.4l8.6-8.6l-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="transition-opacity duration-500 ease-in-out" style="opacity:1"><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/advance/in-depth-about-build.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">In-depth understanding of build</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/advance/in-depth-about-dev-command.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="DYqu8" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">In-depth understanding of the dev command</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/advance/copy.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Use the Copy Tools</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/advance/external-dependency.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">How to handle third-party dependencies</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/advance/build-umd.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Build umd products</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/advance/asset.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Handle static resource files</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/advance/theme-config.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Theme Configuration</div></a></div></div></div></section><section block="~" class="mt-1"><div flex="~" justify="between" items-start="~" cursor="pointer" class="items-center SCFOX"><h2 p="y-1 x-2 h-8" text="sm" font="semibold" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Best practices</h2><div p="2" class="DO2xf"><div cursor-pointer="~" style="transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16L12 26l-1.4-1.4l8.6-8.6l-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="transition-opacity duration-500 ease-in-out" style="opacity:1"><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/best-practices/components.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Developing Components</div></a></div></div></div></section></nav></div></aside><div flex="~ shrink-0" class="Attzr"><div w="full"><div class="modern-doc"><!--$--><h1 id="in-depth-understanding-of-the-dev-command"><a class="header-anchor" aria-hidden="true" href="#in-depth-understanding-of-the-dev-command">#</a>In-depth understanding of the dev command</h1>
+<p>The <code>dev</code> command provided by the module project is mainly used for debugging the code.</p>
+<h2 id="the-overall-flow-of-the-command-run"><a class="header-anchor" aria-hidden="true" href="#the-overall-flow-of-the-command-run">#</a>The overall flow of the command run</h2>
+<ol>
+<li>When the <code>dev</code> command is executed, Module Tools starts looking for debugging tools or tasks that can be executed. A debugging tool or task is a Module Tools debugging tool plugin like Storybook.</li>
+<li>When a debugging tool is found, it is executed immediately.</li>
+<li>When multiple debugging tools are found, the debugging tools list menu is displayed. A debug tool can be started by selecting the name option corresponding to it.</li>
+<li>When no debug tool is found, the user is informed that no debug tool is available.</li>
+</ol>
+<p>In addition to the <code>dev</code> command, you can also start a debugging tool or task directly by using the <code>dev [debug tool name]</code> option.</p>
+<h2 id="extending-the-dev-command"><a class="header-anchor" aria-hidden="true" href="#extending-the-dev-command">#</a>Extending the dev command</h2>
+<p>If you need to extend the dev command, or rather provide your own Module Tools debugging tool plug-in, then you will need to know the following first.</p>
+<ul>
+<li><a href="/module-tools/en/plugins/guide/getting-started.html">Development of plugins</a></li>
+<li><a href="/module-tools/en/api/plugin-api/plugin-hooks.html#%E8%B0%83%E8%AF%95%E9%92%A9%E5%AD%90">Debugging Tools Plugin API</a></li>
+</ul>
+<p>In general, the code to implement a debugging tool that does nothing and the associated configuration is as follows.</p>
+<div class="ch-codegroup not-prose "><div class="ch-editor-frame" style="background:#2e3440"><div class="ch-frame-title-bar" style="color:#C5C5C5;background:#2e3440"><div class="ch-frame-buttons"><div class="ch-frame-button ch-frame-button-left"></div><div class="ch-frame-button-space"></div><div class="ch-frame-button ch-frame-button-middle"></div><div class="ch-frame-button-space"></div><div class="ch-frame-button ch-frame-button-right"></div></div><div title="do-nothing.ts" data-ch-tab="north" class="ch-editor-tab ch-editor-tab-active" style="background:#3b4252;color:#d8dee9;border-right-color:#3b425200;border-bottom-color:#88c0d000"><div><span style="opacity:0.5"></span>do-nothing.ts</div></div><div style="flex:1;min-width:0.8em"></div><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="ch-editor-button"><title>Copy</title><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6px" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg></div><div data-ch-panel="north" style="flex-grow:1;overflow:hidden"><div class="ch-code-wrapper" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto;height:100%"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>export default (): CliPlugin&lt;ModuleTools&gt; =&gt; ({</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  name: &#x27;do-nothing&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  setup() {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    return {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      registerDev() {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>        return {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>          // Debugging tool name</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>          name: &#x27;do-nothing&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>          // Menu display content</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>          menuItem: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>            name: &#x27;DoNothing&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>            value: &#x27;do-nothing&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>          },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>          // The defined dev subcommand</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>          subCommands: [&#x27;donothing&#x27;, &#x27;dn&#x27;],</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>          async action() {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>            // dev logic</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>            console.info(&#x27;Run build --watch, and do nothing.&#x27;);</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>          },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>        };</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    };</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>});</span></div></div><br/></code></div></div></div></div>
+<p>If this debugging tool plugin is required, it needs to be added to the configuration file.</p>
+<div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>import doNothingPlugin from &#x27;./plugins/do-nothing&#x27;;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>export default defineConfig({</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  plugins: [</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    //..</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    doNothingPlugin()</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  ],</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>});</span></div></div><br/></code></div></div>
+<p>At this point we can execute it when we execute the <code>dev</code> or <code>dev do-nothing</code> command. After execution, it will first execute the source build task in listening mode and print the log messages immediately afterwards.</p>
+<p>For currently officially supported debugging tools and third-party supported debugging tools, you can view them in <a href="/module-tools/en/plugins/official-list/overview.html">plugins list</a>.</p><!--/$--><div><footer m="t-8"><div flex="~ col sm:row" justify="sm:around" gap="2" p="t-6"><div flex="~ col" class="zPHT1"><a class="qVky9 gMyXy" target="" cursor="pointer" href="/module-tools/en/guide/advance/in-depth-about-build.html"><span class="pA5H9">Previous Page</span><span class="K2e43">In-depth understanding of build</span></a></div><div flex="~ col" class="oflez"><a class="qVky9 gMyXy oflez" target="" cursor="pointer" href="/module-tools/en/guide/advance/copy.html"><span class="pA5H9">Next page</span><span class="K2e43">Use the Copy Tools</span></a></div></div></footer></div></div></div><div class="xH_Uj" style="min-height:calc(100vh - (var(--modern-nav-height) + 32px))"><div><div flex="~ col"><div class="&lt;lg:hidden"><div p="l-4" text="sm" font-medium="~" id="aside-container" style="border-left:1px solid var(--modern-c-divider-light)" class="relative"><div class="absolute" opacity="0" w="1px" h="18px" bg="brand" style="top:33px;left:-1px;transition:top 0.25s cubic-bezier(0, 1, 0.5, 1), background-color 0.5s, opacity 0.25s" id="aside-marker"></div><div block="~" class="leading-7" text="sm" font="semibold">ON THIS PAGE</div><nav><ul class="relative"><li><a href="#the-overall-flow-of-the-command-run" block="~" text="text-2" hover="text-text-1" transition="color duration-300" class="leading-7" style="font-size:13px;padding-left:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">The overall flow of the command run</a></li><li><a href="#extending-the-dev-command" block="~" text="text-2" hover="text-text-1" transition="color duration-300" class="leading-7" style="font-size:13px;padding-left:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Extending the dev command</a></li></ul></nav></div></div></div></div></div></div></div></section></div></div><div id="search-container"></div></body></html>

package/doc_build/en/guide/advance/theme-config.html ADDED Viewed

@@ -0,0 +1,40 @@
+<!doctype html><html  lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title data-rh="true">Theme Configuration - Module Tools</title><meta data-rh="true" name="description" content="Module Engineering Solutions"/>
+<script id="check-dark-light">
+;(() => {
+  const saved = localStorage.getItem('modern-theme-appearance')
+  const prefereDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+  if (!saved || saved === 'auto' ? prefereDark : saved === 'dark') {
+    document.documentElement.classList.add('dark')
+  }
+})()
+</script>
+<link rel="icon" href="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/logo-1x-0104.png"><script>!function(){"use strict";var e,n,i,t,o,u={},r={};function a(e){var n=r[e];if(void 0!==n)return n.exports;var i=r[e]={exports:{}};return u[e].call(i.exports,i,i.exports,a),i.exports}a.m=u,e=[],a.O=function(n,i,t,o){if(!i){var u=1/0;for(d=0;d<e.length;d++){i=e[d][0],t=e[d][1],o=e[d][2];for(var r=!0,_=0;_<i.length;_++)(!1&o||u>=o)&&Object.keys(a.O).every((function(e){return a.O[e](i[_])}))?i.splice(_--,1):(r=!1,o<u&&(u=o));if(r){e.splice(d--,1);var c=t();void 0!==c&&(n=c)}}return n}o=o||0;for(var d=e.length;d>0&&e[d-1][2]>o;d--)e[d]=e[d-1];e[d]=[i,t,o]},a.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(n,{a:n}),n},i=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},a.t=function(e,t){if(1&t&&(e=this(e)),8&t)return e;if("object"==typeof e&&e){if(4&t&&e.__esModule)return e;if(16&t&&"function"==typeof e.then)return e}var o=Object.create(null);a.r(o);var u={};n=n||[null,i({}),i([]),i(i)];for(var r=2&t&&e;"object"==typeof r&&!~n.indexOf(r);r=i(r))Object.getOwnPropertyNames(r).forEach((function(n){u[n]=function(){return e[n]}}));return u.default=function(){return e},a.d(o,u),o},a.d=function(e,n){for(var i in n)a.o(n,i)&&!a.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:n[i]})},a.f={},a.e=function(e){return Promise.all(Object.keys(a.f).reduce((function(n,i){return a.f[i](e,n),n}),[]))},a.u=function(e){return"static/js/async/"+({229:"en_guide_intro_getting-started",237:"zh_api_config_build-config",262:"en_plugins_official-list_plugin-banner",315:"en_index",421:"zh_api_config_testing",727:"zh_guide_advance_in-depth-about-build",775:"zh_guide_basic_before-getting-started",1085:"en_api_index",1108:"zh_guide_intro_why-module-engineering-solution",1178:"zh_api_plugin-api_plugin-hooks",1180:"zh_guide_advance_theme-config",1189:"zh_api_index",1677:"en_api_plugin-api_plugin-hooks",1756:"zh_guide_basic_command-preview",1895:"zh_index",2013:"zh_guide_best-practices_components",2020:"zh_guide_basic_publish-your-project",2033:"en_guide_intro_welcome",2034:"zh_guide_intro_welcome",2097:"en_api_config_plugins",2477:"zh_plugins_official-list_plugin-import",2532:"en_guide_basic_use-micro-generator",2540:"zh_guide_advance_in-depth-about-dev-command",2556:"en_api_config_testing",2611:"zh_guide_advance_copy",2633:"zh_guide_intro_getting-started",2678:"en_guide_basic_before-getting-started",2821:"zh_guide_basic_modify-output-product",2892:"zh_plugins_guide_setup-function",3032:"en_guide_basic_publish-your-project",3415:"zh_plugins_official-list_plugin-banner",3741:"en_guide_basic_test-your-project",3806:"zh_api_config_plugins",4260:"en_guide_advance_external-dependency",4390:"zh_plugins_official-list_overview",4663:"en_guide_advance_build-umd",4695:"zh_api_config_design-system",4749:"en_plugins_guide_setup-function",4837:"zh_guide_advance_build-umd",5057:"en_guide_advance_copy",5107:"zh_guide_basic_using-storybook",5284:"zh_plugins_guide_plugin-object",5300:"en_plugins_guide_plugin-object",5532:"zh_guide_advance_external-dependency",5578:"en_guide_basic_modify-output-product",5654:"en_api_config_build-config",5723:"zh_guide_advance_asset",5966:"zh_guide_basic_test-your-project",6098:"en_guide_advance_theme-config",7241:"zh_api_config_build-preset",7294:"zh_guide_basic_use-micro-generator",7401:"en_guide_best-practices_components",7512:"en_guide_intro_why-module-engineering-solution",7571:"en_guide_basic_command-preview",8230:"en_guide_advance_asset",8687:"en_plugins_guide_getting-started",8782:"en_api_config_build-preset",8888:"en_plugins_official-list_plugin-import",8927:"en_guide_advance_in-depth-about-build",9220:"en_api_config_design-system",9479:"en_plugins_official-list_overview",9675:"en_guide_basic_using-storybook",9826:"en_guide_advance_in-depth-about-dev-command",9868:"zh_plugins_guide_getting-started"}[e]||e)+"."+{229:"fdf2a5e3",237:"e0239f0b",262:"c8fc2ef5",315:"9d8e7f26",421:"7af33726",727:"f74fb46b",775:"cb228032",1085:"e8c3584a",1108:"c5feb99d",1114:"d0e9a03f",1178:"54181e2b",1180:"9d46a256",1189:"83d48f6f",1677:"130c0839",1756:"d01b5121",1895:"bdf672c6",2013:"63e6ce1f",2020:"f1222d3a",2033:"e8402d15",2034:"e1854445",2097:"e2525188",2477:"d9e7fb77",2532:"1d9ade59",2540:"390bd229",2556:"bdfe73d2",2611:"0c87a269",2633:"ed054585",2678:"1da2f70c",2821:"511034ae",2892:"d79620be",3032:"6ffa1dcb",3415:"defbf67c",3741:"503389bd",3806:"bb32094e",4260:"21c368af",4390:"bded70c0",4663:"5912e38e",4695:"6f3e0d0a",4749:"bf63c2f5",4837:"cd0724c4",5057:"e73474a0",5107:"e684c97c",5284:"acf4be01",5300:"2799e64d",5532:"38ab900c",5578:"c1634e05",5654:"4b68a964",5723:"0abb6b82",5966:"bb4ee150",6098:"ed245a3c",7241:"af73b578",7294:"fbbfa670",7401:"db985beb",7512:"5b18a76a",7571:"16337618",8230:"29c82557",8687:"5c423f88",8782:"3c87d23b",8888:"dc5a5224",8927:"90beffab",9220:"bae5a6a4",9479:"226be4e5",9675:"2e1cf2bc",9826:"7be33ae4",9868:"d0775941"}[e]+".js"},a.miniCssF=function(e){},a.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),a.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t={},o="@modern-js/module-tools-docs:",a.l=function(e,n,i,u){if(t[e])t[e].push(n);else{var r,_;if(void 0!==i)for(var c=document.getElementsByTagName("script"),d=0;d<c.length;d++){var f=c[d];if(f.getAttribute("src")==e||f.getAttribute("data-webpack")==o+i){r=f;break}}r||(_=!0,(r=document.createElement("script")).charset="utf-8",r.timeout=120,a.nc&&r.setAttribute("nonce",a.nc),r.setAttribute("data-webpack",o+i),r.src=e),t[e]=[n];var s=function(n,i){r.onerror=r.onload=null,clearTimeout(g);var o=t[e];if(delete t[e],r.parentNode&&r.parentNode.removeChild(r),o&&o.forEach((function(e){return e(i)})),n)return n(i)},g=setTimeout(s.bind(null,void 0,{type:"timeout",target:r}),12e4);r.onerror=s.bind(null,r.onerror),r.onload=s.bind(null,r.onload),_&&document.head.appendChild(r)}},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.p="/module-tools/",function(){var e={6272:0};a.f.j=function(n,i){var t=a.o(e,n)?e[n]:void 0;if(0!==t)if(t)i.push(t[2]);else if(6272!=n){var o=new Promise((function(i,o){t=e[n]=[i,o]}));i.push(t[2]=o);var u=a.p+a.u(n),r=new Error;a.l(u,(function(i){if(a.o(e,n)&&(0!==(t=e[n])&&(e[n]=void 0),t)){var o=i&&("load"===i.type?"missing":i.type),u=i&&i.target&&i.target.src;r.message="Loading chunk "+n+" failed.\n("+o+": "+u+")",r.name="ChunkLoadError",r.type=o,r.request=u,t[1](r)}}),"chunk-"+n,n)}else e[n]=0},a.O.j=function(n){return 0===e[n]};var n=function(n,i){var t,o,u=i[0],r=i[1],_=i[2],c=0;if(u.some((function(n){return 0!==e[n]}))){for(t in r)a.o(r,t)&&(a.m[t]=r[t]);if(_)var d=_(a)}for(n&&n(i);c<u.length;c++)o=u[c],a.o(e,o)&&e[o]&&e[o][0](),e[o]=0;return a.O(d)},i=self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[];i.forEach(n.bind(null,0)),i.push=n.bind(null,i.push.bind(i))}()}();</script><script defer="defer" src="/module-tools/static/js/lib-polyfill.0d49b811.js"></script><script defer="defer" src="/module-tools/static/js/lib-lodash.5ea7bf7d.js"></script><script defer="defer" src="/module-tools/static/js/lib-react.209d3da0.js"></script><script defer="defer" src="/module-tools/static/js/lib-router.6f1082f5.js"></script><script defer="defer" src="/module-tools/static/js/9061.555c88e4.js"></script><script defer="defer" src="/module-tools/static/js/main.457dc37f.js"></script><link href="/module-tools/static/css/main.0bdbae52.css" rel="stylesheet"></head><body ><div id="root"><div><header class="top-0 left-0 relative md:fixed w-full" style="z-index:var(--modern-z-index-nav);background:var(--modern-c-bg)"><div class="dHJzp
+          csOJo"></div><div class="z0Ov1 modern-doc-nav" p="x-6"><div flex="~" justify="between" align="items-center" h="full" class="bcLAe"><div class="undefined"><a href="/module-tools/en" w="full" h="full" text="1rem" font="semibold" transition="opacity duration-300" hover="opacity-60" class="flex items-center"><span>Module Tools</span></a></div><div flex="~ 1" justify="end" align-items-center="~"><div class="LPoOT"><div flex="~ sm:1" items="center" p="sm:l-4 sm:r-2"><div class="B7xTH"><button><svg width="18" height="24" viewBox="0 0 32 32" hight="18"><path fill="var(--modern-c-gray)" d="m29 27.586l-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9a9.01 9.01 0 0 1-9-9Z"></path></svg><p class="JFbLy">Search</p><div><span>⌘</span><span>K</span></div></button></div><div class="cqbI7"><svg width="24" height="24" viewBox="0 0 32 32"><path fill="var(--modern-c-gray)" d="m29 27.586l-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9a9.01 9.01 0 0 1-9-9Z"></path></svg></div></div><div class="menu" h="14"><div text="sm" font="medium" m="x-3" class="text-brand-dark"><a class="qVky9 " target="" cursor="pointer" href="/module-tools/en/guide/intro/welcome.html">Guide</a></div><div text="sm" font="medium" m="x-3" class=""><a class="qVky9 " target="" cursor="pointer" href="/module-tools/en/api/index.html">API</a></div><div text="sm" font="medium" m="x-3" class=""><a class="qVky9 " target="" cursor="pointer" href="/module-tools/en/plugins/guide/getting-started.html">Plugins</a></div><div m="x-3" last="mr-0"><div h="14" class="relative" flex="~ center"><button flex="~ center" align="items-center" font="medium" text="sm text-1 hover:text-2" transition="color duration-200" class="nav-menu-group-button"><span m="r-1" text="sm" font="medium">v2.7.0</span><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z"></path></svg></button><div pos="top-13 right-0" m="x-0.8" transition="opacity duration-300" class="nav-menu-group-content absolute" style="opacity:0;visibility:hidden"><div class="p-3 w-full h-full min-w-128px max-h-100vh rounded-xl whitespace-nowrap bg-white" style="box-shadow:var(--modern-shadow-3);margin-right:-1.5rem;z-index:100;border:1px solid var(--modern-c-divider-light)"><div><div font="medium"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="qVky9 "><div class="rounded-md" hover="bg-mute" p="y-1.6 l-3 r-6"><div flex="~"><span m="r-1">Changelog<svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1 l-1" class="inline-block align-text-top"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></span></div></div></a></div></div><div><div font="medium"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="qVky9 "><div class="rounded-md" hover="bg-mute" p="y-1.6 l-3 r-6"><div flex="~"><span m="r-1">Contributing<svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1 l-1" class="inline-block align-text-top"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></span></div></div></a></div></div></div></div></div></div></div><div class="flex-center flex-row"><div flex="~" text="sm" font="bold" align="items-center" class="translation sjQjZ"><div m="x-1.5"><div h="14" class="relative" flex="~ center"><button flex="~ center" align="items-center" font="medium" text="sm text-1 hover:text-2" transition="color duration-200" class="nav-menu-group-button"><span m="r-1" text="sm" font="medium"><svg width="32" height="32" viewBox="0 0 32 32" w="18px" h="18px"><path fill="currentColor" d="M27.85 29H30l-6-15h-2.35l-6 15h2.15l1.6-4h6.85zm-7.65-6l2.62-6.56L25.45 23zM18 7V5h-7V2H9v3H2v2h10.74a14.71 14.71 0 0 1-3.19 6.18A13.5 13.5 0 0 1 7.26 9h-2.1a16.47 16.47 0 0 0 3 5.58A16.84 16.84 0 0 1 3 18l.75 1.86A18.47 18.47 0 0 0 9.53 16a16.92 16.92 0 0 0 5.76 3.84L16 18a14.48 14.48 0 0 1-5.12-3.37A17.64 17.64 0 0 0 14.8 7z"></path></svg></span><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z"></path></svg></button><div pos="top-13 right-0" m="x-0.8" transition="opacity duration-300" class="nav-menu-group-content absolute" style="opacity:0;visibility:hidden"><div class="p-3 w-full h-full min-w-128px max-h-100vh rounded-xl whitespace-nowrap bg-white" style="box-shadow:var(--modern-shadow-3);margin-right:-1.5rem;z-index:100;border:1px solid var(--modern-c-divider-light)"><div><div font="medium"><a class="qVky9 " target="" cursor="pointer" href="/module-tools/guide/advance/theme-config"><div class="rounded-md" hover="bg-mute" p="y-1.6 l-3 r-6"><div flex="~"><span m="r-1">简体中文<svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1 l-1" class="inline-block align-text-top"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></span></div></div></a></div></div><div><div class="rounded-md" p="y-1.6 l-3"><span m="r-1" text="brand">English</span></div></div></div></div></div></div></div><div class="sjQjZ modern-doc-appearance" align-items-center="center"><button class="xSrUP undefined" id="" type="button" role="switch"><span class="CSfjI"><span class="zDdMk"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="nk0gt"><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="A1HSI"><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg></span></span></button></div><div class="social-links WIILt flex-center" pos="relative"><div h="full" flex="~" gap="x-4" align-items-center="~" transition="color duration-300"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools" target="_blank" rel="noopener noreferrer"><div class="a9VBM"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></div></a></div></div></div></div><div class="yd31b"><button class=" eE8v3"><span class="pOzTZ"><span class="aD0WQ"></span><span class="GwaZ7"></span><span class="HyMv9"></span></span></button><div class="XAjwG " id="navScreen"><div class="VrSyn"><div class="YCP7r"><div w="full" class="LiNpS"><div text="sm" font="medium" m="x-3" class="text-brand-dark"><a class="qVky9 " target="" cursor="pointer" href="/module-tools/en/guide/intro/welcome.html">Guide</a></div></div><div w="full" class="LiNpS"><div text="sm" font="medium" m="x-3" class=""><a class="qVky9 " target="" cursor="pointer" href="/module-tools/en/api/index.html">API</a></div></div><div w="full" class="LiNpS"><div text="sm" font="medium" m="x-3" class=""><a class="qVky9 " target="" cursor="pointer" href="/module-tools/en/plugins/guide/getting-started.html">Plugins</a></div></div><div w="full" class="LiNpS"><div m="x-3" last="mr-0"><div pos="relative" class=" FwXtz"><button class="YoOiJ"><span class="QFqBl">v2.7.0</span><svg width="1em" height="1em" viewBox="0 0 32 32" class=" GPyuP "><path fill="currentColor" d="M16 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z"></path></svg></button><div><div class="SEGAO"><div><div class="py-1" font="medium"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="qVky9 "><div><div flex="~"><span m="r-1">Changelog</span><svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></div></div></a></div></div><div><div class="py-1" font="medium"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="qVky9 "><div><div flex="~"><span m="r-1">Contributing</span><svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></div></div></a></div></div></div></div></div></div></div></div><div class="flex-center flex-col"><div class="mt-2 NeDxD" flex="~" justify="center"><button class="xSrUP undefined" id="" type="button" role="switch"><span class="CSfjI"><span class="zDdMk"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="nk0gt"><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="A1HSI"><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg></span></span></button></div><div flex="~" text="sm" font="bold" justify="center"><div m="x-1.5 y-1"><div pos="relative" class=" FwXtz"><button class="YoOiJ"><span class="QFqBl"><svg width="32" height="32" viewBox="0 0 32 32" w="18px" h="18px"><path fill="currentColor" d="M27.85 29H30l-6-15h-2.35l-6 15h2.15l1.6-4h6.85zm-7.65-6l2.62-6.56L25.45 23zM18 7V5h-7V2H9v3H2v2h10.74a14.71 14.71 0 0 1-3.19 6.18A13.5 13.5 0 0 1 7.26 9h-2.1a16.47 16.47 0 0 0 3 5.58A16.84 16.84 0 0 1 3 18l.75 1.86A18.47 18.47 0 0 0 9.53 16a16.92 16.92 0 0 0 5.76 3.84L16 18a14.48 14.48 0 0 1-5.12-3.37A17.64 17.64 0 0 0 14.8 7z"></path></svg></span><svg width="1em" height="1em" viewBox="0 0 32 32" class=" GPyuP "><path fill="currentColor" d="M16 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z"></path></svg></button><div><div class="SEGAO"><div><div class="py-1" font="medium"><a class="qVky9 " target="" cursor="pointer" href="/module-tools/zh"><div><div flex="~"><span m="r-1">简体中文</span><svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></div></div></a></div></div><div><div class="p-1"><span m="r-1" text="brand">English</span></div></div></div></div></div></div></div><div class="social-links WIILt flex-center" pos="relative"><div h="full" flex="~" gap="x-4" align-items-center="~" transition="color duration-300"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools" target="_blank" rel="noopener noreferrer"><div class="a9VBM"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></div></a></div></div></div></div></div><div class="B7xTH"><button><svg width="18" height="24" viewBox="0 0 32 32" hight="18"><path fill="var(--modern-c-gray)" d="m29 27.586l-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9a9.01 9.01 0 0 1-9-9Z"></path></svg><p class="JFbLy">Search</p><div><span>⌘</span><span>K</span></div></button></div><div class="cqbI7"><svg width="24" height="24" viewBox="0 0 32 32"><path fill="var(--modern-c-gray)" d="m29 27.586l-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9a9.01 9.01 0 0 1-9-9Z"></path></svg></div></div></div></div></div></header><section><div p="t-0" m="md:t-14" class="NycN9"><div class="htA00"><button flex="~ center" class="i_YqX"><div text="md" m="r-2"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M4 6h24v2H4zm0 18h24v2H4zm0-12h24v2H4zm0 6h24v2H4z"></path></svg></div><span text="sm">Menu</span></button></div><aside class="modern-scrollbar WSh16 "><div m="t-1"><nav><section block="~" class="mt-1"><div flex="~" justify="between" items-start="~" cursor="pointer" class="items-center SCFOX"><h2 p="y-1 x-2 h-8" text="sm" font="semibold" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Introduction</h2><div p="2" class="DO2xf"><div cursor-pointer="~" style="transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16L12 26l-1.4-1.4l8.6-8.6l-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="transition-opacity duration-500 ease-in-out" style="opacity:1"><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/intro/welcome.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Welcome to Module Tools</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/intro/why-module-engineering-solution.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Why module project solution</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/intro/getting-started.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Quick Start</div></a></div></div></div></section><section block="~" class="mt-1"><div flex="~" justify="between" items-start="~" cursor="pointer" class="items-center SCFOX"><h2 p="y-1 x-2 h-8" text="sm" font="semibold" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Basic Guide</h2><div p="2" class="DO2xf"><div cursor-pointer="~" style="transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16L12 26l-1.4-1.4l8.6-8.6l-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="transition-opacity duration-500 ease-in-out" style="opacity:1"><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/basic/before-getting-started.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Before you start</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/basic/command-preview.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Command Preview</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/basic/modify-output-product.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">modify-output-product</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/basic/use-micro-generator.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Using the Microgenerator</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/basic/using-storybook.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Using Storybook</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/basic/test-your-project.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Testing Projects</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/basic/publish-your-project.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Versioning and Publishing</div></a></div></div></div></section><section block="~" class="mt-1"><div flex="~" justify="between" items-start="~" cursor="pointer" class="items-center SCFOX"><h2 p="y-1 x-2 h-8" text="sm" font="semibold" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Advanced Guide</h2><div p="2" class="DO2xf"><div cursor-pointer="~" style="transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16L12 26l-1.4-1.4l8.6-8.6l-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="transition-opacity duration-500 ease-in-out" style="opacity:1"><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/advance/in-depth-about-build.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">In-depth understanding of build</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/advance/in-depth-about-dev-command.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">In-depth understanding of the dev command</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/advance/copy.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Use the Copy Tools</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/advance/external-dependency.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">How to handle third-party dependencies</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/advance/build-umd.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Build umd products</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/advance/asset.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Handle static resource files</div></a></div><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/advance/theme-config.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="DYqu8" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Theme Configuration</div></a></div></div></div></section><section block="~" class="mt-1"><div flex="~" justify="between" items-start="~" cursor="pointer" class="items-center SCFOX"><h2 p="y-1 x-2 h-8" text="sm" font="semibold" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Best practices</h2><div p="2" class="DO2xf"><div cursor-pointer="~" style="transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16L12 26l-1.4-1.4l8.6-8.6l-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="transition-opacity duration-500 ease-in-out" style="opacity:1"><div m="l-4"><a class="qVky9 eKj7t" target="" cursor="pointer" href="/module-tools/en/guide/best-practices/components.html"><div m="t-1" p="y-1.5 x-2" block="~" border="rounded-md" class="SCFOX" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px">Developing Components</div></a></div></div></div></section></nav></div></aside><div flex="~ shrink-0" class="Attzr"><div w="full"><div class="modern-doc"><!--$--><h1 id="theme-configuration"><a class="header-anchor" aria-hidden="true" href="#theme-configuration">#</a>Theme Configuration</h1>
+<p>The module project provides the ability to configure themes through the <a href="/module-tools/en/api/config/design-system.html"><code>designSystem</code></a> API.</p>
+<h2 id="motivation-and-rationale"><a class="header-anchor" aria-hidden="true" href="#motivation-and-rationale">#</a>Motivation and rationale</h2>
+<p>Theme configuration is somewhat similar to the custom theme functionality in the component library and is mainly used in style development. We can use the <code>designToken</code> generated by the <code>designSystem</code> configuration in different style development environments.</p>
+<p>The so-called <code>designToken</code> corresponds to different things in different style development environments.</p>
+<ul>
+<li>tailwindcss: use <code>designSystem</code> as the <code>theme</code> configuration for tailwindcss. So you can use.<!-- -->
+<ul>
+<li>The name of the HTML class supported by tailwindcss.</li>
+<li><code>@apply</code> custom directive under css/less/sass to use a string with the same name as the HTML class name supported by tailwindcss.</li>
+</ul>
+</li>
+<li>css/less/scss: Generate global style variables via <code>designSystem</code>.</li>
+</ul>
+<p>The data structure of the <code>designSystem</code> API is borrowed from the <a href="https://tailwindcss.com/docs/theme" target="_blank" rel="nofollow">theme API</a> in the <code>tailwindcss</code> configuration object, so a default set of <code>designToken</code> exists. For the default values, see the <a href="/module-tools/en/api/config/design-system.html"><code>designSystem</code> API</a>.</p>
+<div class="modern-directive info"><p class="modern-directive-title">INFO</p><div class="modern-directive-content"><p>
+The css/less/sass global variables are not supported yet.</p></div></div>
+<h2 id="usage-examples"><a class="header-anchor" aria-hidden="true" href="#usage-examples">#</a>Usage examples</h2>
+<h3 id="tailwindcss"><a class="header-anchor" aria-hidden="true" href="#tailwindcss">#</a>tailwindcss</h3>
+<p>When using tailwindcss, its <a href="https://v2.tailwindcss.com/docs/theme#extending-the-default-theme" target="_blank" rel="nofollow"><code>theme</code></a> configuration can be set via <code>designSystem</code>.</p>
+<p>For example, the following configuration extends the original color configuration:</p>
+<div class="ch-codegroup not-prose "><div class="ch-editor-frame" style="background:#2e3440"><div class="ch-frame-title-bar" style="color:#C5C5C5;background:#2e3440"><div class="ch-frame-buttons"><div class="ch-frame-button ch-frame-button-left"></div><div class="ch-frame-button-space"></div><div class="ch-frame-button ch-frame-button-middle"></div><div class="ch-frame-button-space"></div><div class="ch-frame-button ch-frame-button-right"></div></div><div title="./modern.config.ts" data-ch-tab="north" class="ch-editor-tab ch-editor-tab-active" style="background:#3b4252;color:#d8dee9;border-right-color:#3b425200;border-bottom-color:#88c0d000"><div><span style="opacity:0.5">./</span>modern.config.ts</div></div><div style="flex:1;min-width:0.8em"></div><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="ch-editor-button"><title>Copy</title><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6px" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg></div><div data-ch-panel="north" style="flex-grow:1;overflow:hidden"><div class="ch-code-wrapper" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto;height:100%"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>export default {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  designSystem: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    extend: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      colors: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>        primary: &#x27;#1677ff&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><br/></code></div></div></div></div>
+<p>We can have two ways of using tailwindcss in our code.</p>
+<h4 id="html-class"><a class="header-anchor" aria-hidden="true" href="#html-class">#</a>HTML Class</h4>
+<div class="ch-codegroup not-prose "><div class="ch-editor-frame" style="background:#2e3440"><div class="ch-frame-title-bar" style="color:#C5C5C5;background:#2e3440"><div class="ch-frame-buttons"><div class="ch-frame-button ch-frame-button-left"></div><div class="ch-frame-button-space"></div><div class="ch-frame-button ch-frame-button-middle"></div><div class="ch-frame-button-space"></div><div class="ch-frame-button ch-frame-button-right"></div></div><div title="./src/index.tsx" data-ch-tab="north" class="ch-editor-tab ch-editor-tab-active" style="background:#3b4252;color:#d8dee9;border-right-color:#3b425200;border-bottom-color:#88c0d000"><div><span style="opacity:0.5">./src/</span>index.tsx</div></div><div style="flex:1;min-width:0.8em"></div><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="ch-editor-button"><title>Copy</title><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6px" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg></div><div data-ch-panel="north" style="flex-grow:1;overflow:hidden"><div class="ch-code-wrapper" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto;height:100%"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>import &#x27;tailwindcss/utilities.css&#x27;;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>export default () =&gt; {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  return &lt;div className=&quot;bg-primary&quot;&gt;&lt;/div&gt;;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><br/></code></div></div></div></div>
+<h4 id="apply-directives"><a class="header-anchor" aria-hidden="true" href="#apply-directives">#</a><code>@apply</code> Directives</h4>
+<div class="modern-directive info"><p class="modern-directive-title">INFO</p><div class="modern-directive-content"><p>
+About <a href="https://tailwindcss.com/docs/functions-and-directives#apply" target="_blank" rel="nofollow"><code>@apply</code></a>。</p></div></div>
+<div class="ch-codegroup not-prose "><div class="ch-editor-frame" style="background:#2e3440"><div class="ch-frame-title-bar" style="color:#C5C5C5;background:#2e3440"><div class="ch-frame-buttons"><div class="ch-frame-button ch-frame-button-left"></div><div class="ch-frame-button-space"></div><div class="ch-frame-button ch-frame-button-middle"></div><div class="ch-frame-button-space"></div><div class="ch-frame-button ch-frame-button-right"></div></div><div title="./src/index.tsx" data-ch-tab="north" class="ch-editor-tab ch-editor-tab-active" style="background:#3b4252;color:#d8dee9;border-right-color:#3b425200;border-bottom-color:#88c0d000"><div><span style="opacity:0.5">./src/</span>index.tsx</div></div><div title="./src/index.css" data-ch-tab="north" class="ch-editor-tab ch-editor-tab-inactive" style="background:#2e3440;color:#d8dee966;border-right-color:#3b425200;border-bottom-color:#2e3440"><div><span style="opacity:0.5">./src/</span>index.css</div></div><div style="flex:1;min-width:0.8em"></div><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="ch-editor-button"><title>Copy</title><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6px" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg></div><div data-ch-panel="north" style="flex-grow:1;overflow:hidden"><div class="ch-code-wrapper" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto;height:100%"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>import &#x27;./index.css&#x27;;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>export default () =&gt; {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  return &lt;div className=&quot;btn-primary&quot;&gt;&lt;/div&gt;;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><br/></code></div></div></div></div><!--/$--><div><footer m="t-8"><div flex="~ col sm:row" justify="sm:around" gap="2" p="t-6"><div flex="~ col" class="zPHT1"><a class="qVky9 gMyXy" target="" cursor="pointer" href="/module-tools/en/guide/advance/asset.html"><span class="pA5H9">Previous Page</span><span class="K2e43">Handle static resource files</span></a></div><div flex="~ col" class="oflez"><a class="qVky9 gMyXy oflez" target="" cursor="pointer" href="/module-tools/en/guide/best-practices/components.html"><span class="pA5H9">Next page</span><span class="K2e43">Developing Components</span></a></div></div></footer></div></div></div><div class="xH_Uj" style="min-height:calc(100vh - (var(--modern-nav-height) + 32px))"><div><div flex="~ col"><div class="&lt;lg:hidden"><div p="l-4" text="sm" font-medium="~" id="aside-container" style="border-left:1px solid var(--modern-c-divider-light)" class="relative"><div class="absolute" opacity="0" w="1px" h="18px" bg="brand" style="top:33px;left:-1px;transition:top 0.25s cubic-bezier(0, 1, 0.5, 1), background-color 0.5s, opacity 0.25s" id="aside-marker"></div><div block="~" class="leading-7" text="sm" font="semibold">ON THIS PAGE</div><nav><ul class="relative"><li><a href="#motivation-and-rationale" block="~" text="text-2" hover="text-text-1" transition="color duration-300" class="leading-7" style="font-size:13px;padding-left:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Motivation and rationale</a></li><li><a href="#usage-examples" block="~" text="text-2" hover="text-text-1" transition="color duration-300" class="leading-7" style="font-size:13px;padding-left:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Usage examples</a></li><li><a href="#tailwindcss" block="~" text="text-2" hover="text-text-1" transition="color duration-300" class="leading-7" style="font-size:13px;padding-left:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">tailwindcss</a></li><li><a href="#html-class" block="~" text="text-2" hover="text-text-1" transition="color duration-300" class="leading-7" style="font-size:13px;padding-left:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">HTML Class</a></li><li><a href="#apply-directives" block="~" text="text-2" hover="text-text-1" transition="color duration-300" class="leading-7" style="font-size:13px;padding-left:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">@apply Directives</a></li></ul></nav></div></div></div></div></div></div></div></section></div></div><div id="search-container"></div></body></html>