[{"data":1,"prerenderedAt":846},["Reactive",2],{"content-query-isEXwCQakO":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"_empty":6,"title":8,"description":9,"layout":10,"body":11,"_type":841,"_id":842,"_source":843,"_file":844,"_extension":845},"/docs/add-ons/unocss/webpack","unocss",false,"","UnoCSS Preset Installation - Webpack.js - Inkline","Install the Inkline Preset for UnoCSS in any Webpack.js application.","docs",{"type":12,"children":13,"toc":836},"root",[14,21,28,35,133,424,688,800,831],{"type":15,"tag":16,"props":17,"children":20},"element","content-heading",{"subtitle":18,"title":19},"UnoCSS Preset","Installation - Webpack.js",[],{"type":15,"tag":22,"props":23,"children":25},"h2",{"id":24},"install-the-inkline-preset-for-unocss-in-any-webpackjs-application",[26],{"type":27,"value":9},"text",{"type":15,"tag":29,"props":30,"children":32},"h3",{"id":31},"installation",[33],{"type":27,"value":34},"Installation",{"type":15,"tag":36,"props":37,"children":41},"div",{"className":38},[39,40],"install-step","_margin-top:2",[42,57,59],{"type":15,"tag":36,"props":43,"children":46},{"className":44},[45],"install-step-title",[47,55],{"type":15,"tag":48,"props":49,"children":52},"span",{"className":50},[51],"install-step-number",[53],{"type":27,"value":54},"1",{"type":27,"value":56}," Install dependencies",{"type":27,"value":58}," \n",{"type":15,"tag":60,"props":61,"children":66},"code",{"className":62,"code":64,"language":65,"meta":7},[63],"language-bash","npm install -D unocss @unocss/webpack @inkline/unocss\n","bash",[67],{"type":15,"tag":68,"props":69,"children":70},"pre",{},[71],{"type":15,"tag":60,"props":72,"children":73},{"__ignoreMap":7},[74],{"type":15,"tag":48,"props":75,"children":78},{"class":76,"line":77},"line",1,[79,85,91,97,101,107,111,115,119,124,128],{"type":15,"tag":48,"props":80,"children":82},{"class":81},"ct-762058",[83],{"type":27,"value":84},"npm",{"type":15,"tag":48,"props":86,"children":88},{"class":87},"ct-553616",[89],{"type":27,"value":90}," ",{"type":15,"tag":48,"props":92,"children":94},{"class":93},"ct-952708",[95],{"type":27,"value":96},"install",{"type":15,"tag":48,"props":98,"children":99},{"class":87},[100],{"type":27,"value":90},{"type":15,"tag":48,"props":102,"children":104},{"class":103},"ct-617022",[105],{"type":27,"value":106},"-D",{"type":15,"tag":48,"props":108,"children":109},{"class":87},[110],{"type":27,"value":90},{"type":15,"tag":48,"props":112,"children":113},{"class":93},[114],{"type":27,"value":5},{"type":15,"tag":48,"props":116,"children":117},{"class":87},[118],{"type":27,"value":90},{"type":15,"tag":48,"props":120,"children":121},{"class":93},[122],{"type":27,"value":123},"@unocss/webpack",{"type":15,"tag":48,"props":125,"children":126},{"class":87},[127],{"type":27,"value":90},{"type":15,"tag":48,"props":129,"children":130},{"class":93},[131],{"type":27,"value":132},"@inkline/unocss",{"type":15,"tag":36,"props":134,"children":136},{"className":135},[39],[137,149,163,408],{"type":15,"tag":36,"props":138,"children":140},{"className":139},[45],[141,147],{"type":15,"tag":48,"props":142,"children":144},{"className":143},[51],[145],{"type":27,"value":146},"2",{"type":27,"value":148}," Create Configuration File",{"type":15,"tag":150,"props":151,"children":152},"p",{},[153,155,161],{"type":27,"value":154},"Create a ",{"type":15,"tag":156,"props":157,"children":158},"code-inline",{},[159],{"type":27,"value":160},"uno.config.ts",{"type":27,"value":162}," file and add the Inkline preset to it.",{"type":15,"tag":60,"props":164,"children":169},{"className":165,"code":167,"language":168,"meta":7},[166],"language-ts","import { defineConfig } from 'unocss';\nimport { createPreset } from '@inkline/unocss';\n\nexport default (async () => {\n    const presetInkline = await createPreset();\n\n    return defineConfig({\n        presets: [presetInkline]\n    });\n})();\n","ts",[170],{"type":15,"tag":68,"props":171,"children":172},{},[173],{"type":15,"tag":60,"props":174,"children":175},{"__ignoreMap":7},[176,209,239,248,291,346,354,381,390,399],{"type":15,"tag":48,"props":177,"children":178},{"class":76,"line":77},[179,185,190,195,199,204],{"type":15,"tag":48,"props":180,"children":182},{"class":181},"ct-149352",[183],{"type":27,"value":184},"import",{"type":15,"tag":48,"props":186,"children":187},{"class":87},[188],{"type":27,"value":189}," { defineConfig } ",{"type":15,"tag":48,"props":191,"children":192},{"class":181},[193],{"type":27,"value":194},"from",{"type":15,"tag":48,"props":196,"children":197},{"class":87},[198],{"type":27,"value":90},{"type":15,"tag":48,"props":200,"children":201},{"class":93},[202],{"type":27,"value":203},"'unocss'",{"type":15,"tag":48,"props":205,"children":206},{"class":87},[207],{"type":27,"value":208},";\n",{"type":15,"tag":48,"props":210,"children":212},{"class":76,"line":211},2,[213,217,222,226,230,235],{"type":15,"tag":48,"props":214,"children":215},{"class":181},[216],{"type":27,"value":184},{"type":15,"tag":48,"props":218,"children":219},{"class":87},[220],{"type":27,"value":221}," { createPreset } ",{"type":15,"tag":48,"props":223,"children":224},{"class":181},[225],{"type":27,"value":194},{"type":15,"tag":48,"props":227,"children":228},{"class":87},[229],{"type":27,"value":90},{"type":15,"tag":48,"props":231,"children":232},{"class":93},[233],{"type":27,"value":234},"'@inkline/unocss'",{"type":15,"tag":48,"props":236,"children":237},{"class":87},[238],{"type":27,"value":208},{"type":15,"tag":48,"props":240,"children":242},{"class":76,"line":241},3,[243],{"type":15,"tag":48,"props":244,"children":245},{},[246],{"type":27,"value":247},"\n",{"type":15,"tag":48,"props":249,"children":251},{"class":76,"line":250},4,[252,257,261,266,271,276,281,286],{"type":15,"tag":48,"props":253,"children":254},{"class":181},[255],{"type":27,"value":256},"export",{"type":15,"tag":48,"props":258,"children":259},{"class":87},[260],{"type":27,"value":90},{"type":15,"tag":48,"props":262,"children":263},{"class":181},[264],{"type":27,"value":265},"default",{"type":15,"tag":48,"props":267,"children":268},{"class":87},[269],{"type":27,"value":270}," (",{"type":15,"tag":48,"props":272,"children":273},{"class":181},[274],{"type":27,"value":275},"async",{"type":15,"tag":48,"props":277,"children":278},{"class":87},[279],{"type":27,"value":280}," () ",{"type":15,"tag":48,"props":282,"children":283},{"class":181},[284],{"type":27,"value":285},"=>",{"type":15,"tag":48,"props":287,"children":288},{"class":87},[289],{"type":27,"value":290}," {\n",{"type":15,"tag":48,"props":292,"children":294},{"class":76,"line":293},5,[295,300,305,309,314,318,323,327,332,336,341],{"type":15,"tag":48,"props":296,"children":297},{"class":87},[298],{"type":27,"value":299},"    ",{"type":15,"tag":48,"props":301,"children":302},{"class":181},[303],{"type":27,"value":304},"const",{"type":15,"tag":48,"props":306,"children":307},{"class":87},[308],{"type":27,"value":90},{"type":15,"tag":48,"props":310,"children":311},{"class":103},[312],{"type":27,"value":313},"presetInkline",{"type":15,"tag":48,"props":315,"children":316},{"class":87},[317],{"type":27,"value":90},{"type":15,"tag":48,"props":319,"children":320},{"class":181},[321],{"type":27,"value":322},"=",{"type":15,"tag":48,"props":324,"children":325},{"class":87},[326],{"type":27,"value":90},{"type":15,"tag":48,"props":328,"children":329},{"class":181},[330],{"type":27,"value":331},"await",{"type":15,"tag":48,"props":333,"children":334},{"class":87},[335],{"type":27,"value":90},{"type":15,"tag":48,"props":337,"children":338},{"class":81},[339],{"type":27,"value":340},"createPreset",{"type":15,"tag":48,"props":342,"children":343},{"class":87},[344],{"type":27,"value":345},"();\n",{"type":15,"tag":48,"props":347,"children":349},{"class":76,"line":348},6,[350],{"type":15,"tag":48,"props":351,"children":352},{},[353],{"type":27,"value":247},{"type":15,"tag":48,"props":355,"children":357},{"class":76,"line":356},7,[358,362,367,371,376],{"type":15,"tag":48,"props":359,"children":360},{"class":87},[361],{"type":27,"value":299},{"type":15,"tag":48,"props":363,"children":364},{"class":181},[365],{"type":27,"value":366},"return",{"type":15,"tag":48,"props":368,"children":369},{"class":87},[370],{"type":27,"value":90},{"type":15,"tag":48,"props":372,"children":373},{"class":81},[374],{"type":27,"value":375},"defineConfig",{"type":15,"tag":48,"props":377,"children":378},{"class":87},[379],{"type":27,"value":380},"({\n",{"type":15,"tag":48,"props":382,"children":384},{"class":76,"line":383},8,[385],{"type":15,"tag":48,"props":386,"children":387},{"class":87},[388],{"type":27,"value":389},"        presets: [presetInkline]\n",{"type":15,"tag":48,"props":391,"children":393},{"class":76,"line":392},9,[394],{"type":15,"tag":48,"props":395,"children":396},{"class":87},[397],{"type":27,"value":398},"    });\n",{"type":15,"tag":48,"props":400,"children":402},{"class":76,"line":401},10,[403],{"type":15,"tag":48,"props":404,"children":405},{"class":87},[406],{"type":27,"value":407},"})();",{"type":15,"tag":409,"props":410,"children":411},"content-alert",{},[412],{"type":15,"tag":150,"props":413,"children":414},{},[415,417,422],{"type":27,"value":416},"If you're using a custom Inkline config file path, make sure to provide it as an options argument to the ",{"type":15,"tag":156,"props":418,"children":419},{},[420],{"type":27,"value":421},"createPreset()",{"type":27,"value":423}," function.",{"type":15,"tag":36,"props":425,"children":427},{"className":426},[39],[428,440,459],{"type":15,"tag":36,"props":429,"children":431},{"className":430},[45],[432,438],{"type":15,"tag":48,"props":433,"children":435},{"className":434},[51],[436],{"type":27,"value":437},"3",{"type":27,"value":439}," Add UnoCSS to your Webpack.js Configuration",{"type":15,"tag":150,"props":441,"children":442},{},[443,445,450,452,457],{"type":27,"value":444},"Next, open your ",{"type":15,"tag":156,"props":446,"children":447},{},[448],{"type":27,"value":449},"webpack.config.ts",{"type":27,"value":451}," file and add the following to the ",{"type":15,"tag":156,"props":453,"children":454},{},[455],{"type":27,"value":456},"plugins",{"type":27,"value":458}," array:",{"type":15,"tag":60,"props":460,"children":463},{"className":461,"code":462,"language":168,"meta":7},[166],"const inkline = require('@inkline/plugin/webpack');\nconst unocss = require('@unocss/webpack').default;\n\nmodule.exports = {\n    plugins: [\n        inkline(),\n        unocss()\n    ],\n    optimization: {\n        realContentHash: true\n    }\n};\n",[464],{"type":15,"tag":68,"props":465,"children":466},{},[467],{"type":15,"tag":60,"props":468,"children":469},{"__ignoreMap":7},[470,518,563,570,600,608,625,641,649,657,670,679],{"type":15,"tag":48,"props":471,"children":472},{"class":76,"line":77},[473,477,481,486,490,494,498,503,508,513],{"type":15,"tag":48,"props":474,"children":475},{"class":181},[476],{"type":27,"value":304},{"type":15,"tag":48,"props":478,"children":479},{"class":87},[480],{"type":27,"value":90},{"type":15,"tag":48,"props":482,"children":483},{"class":103},[484],{"type":27,"value":485},"inkline",{"type":15,"tag":48,"props":487,"children":488},{"class":87},[489],{"type":27,"value":90},{"type":15,"tag":48,"props":491,"children":492},{"class":181},[493],{"type":27,"value":322},{"type":15,"tag":48,"props":495,"children":496},{"class":87},[497],{"type":27,"value":90},{"type":15,"tag":48,"props":499,"children":500},{"class":81},[501],{"type":27,"value":502},"require",{"type":15,"tag":48,"props":504,"children":505},{"class":87},[506],{"type":27,"value":507},"(",{"type":15,"tag":48,"props":509,"children":510},{"class":93},[511],{"type":27,"value":512},"'@inkline/plugin/webpack'",{"type":15,"tag":48,"props":514,"children":515},{"class":87},[516],{"type":27,"value":517},");\n",{"type":15,"tag":48,"props":519,"children":520},{"class":76,"line":211},[521,525,529,533,537,541,545,549,553,558],{"type":15,"tag":48,"props":522,"children":523},{"class":181},[524],{"type":27,"value":304},{"type":15,"tag":48,"props":526,"children":527},{"class":87},[528],{"type":27,"value":90},{"type":15,"tag":48,"props":530,"children":531},{"class":103},[532],{"type":27,"value":5},{"type":15,"tag":48,"props":534,"children":535},{"class":87},[536],{"type":27,"value":90},{"type":15,"tag":48,"props":538,"children":539},{"class":181},[540],{"type":27,"value":322},{"type":15,"tag":48,"props":542,"children":543},{"class":87},[544],{"type":27,"value":90},{"type":15,"tag":48,"props":546,"children":547},{"class":81},[548],{"type":27,"value":502},{"type":15,"tag":48,"props":550,"children":551},{"class":87},[552],{"type":27,"value":507},{"type":15,"tag":48,"props":554,"children":555},{"class":93},[556],{"type":27,"value":557},"'@unocss/webpack'",{"type":15,"tag":48,"props":559,"children":560},{"class":87},[561],{"type":27,"value":562},").default;\n",{"type":15,"tag":48,"props":564,"children":565},{"class":76,"line":241},[566],{"type":15,"tag":48,"props":567,"children":568},{},[569],{"type":27,"value":247},{"type":15,"tag":48,"props":571,"children":572},{"class":76,"line":250},[573,578,583,588,592,596],{"type":15,"tag":48,"props":574,"children":575},{"class":103},[576],{"type":27,"value":577},"module",{"type":15,"tag":48,"props":579,"children":580},{"class":87},[581],{"type":27,"value":582},".",{"type":15,"tag":48,"props":584,"children":585},{"class":103},[586],{"type":27,"value":587},"exports",{"type":15,"tag":48,"props":589,"children":590},{"class":87},[591],{"type":27,"value":90},{"type":15,"tag":48,"props":593,"children":594},{"class":181},[595],{"type":27,"value":322},{"type":15,"tag":48,"props":597,"children":598},{"class":87},[599],{"type":27,"value":290},{"type":15,"tag":48,"props":601,"children":602},{"class":76,"line":293},[603],{"type":15,"tag":48,"props":604,"children":605},{"class":87},[606],{"type":27,"value":607},"    plugins: [\n",{"type":15,"tag":48,"props":609,"children":610},{"class":76,"line":348},[611,616,620],{"type":15,"tag":48,"props":612,"children":613},{"class":87},[614],{"type":27,"value":615},"        ",{"type":15,"tag":48,"props":617,"children":618},{"class":81},[619],{"type":27,"value":485},{"type":15,"tag":48,"props":621,"children":622},{"class":87},[623],{"type":27,"value":624},"(),\n",{"type":15,"tag":48,"props":626,"children":627},{"class":76,"line":356},[628,632,636],{"type":15,"tag":48,"props":629,"children":630},{"class":87},[631],{"type":27,"value":615},{"type":15,"tag":48,"props":633,"children":634},{"class":81},[635],{"type":27,"value":5},{"type":15,"tag":48,"props":637,"children":638},{"class":87},[639],{"type":27,"value":640},"()\n",{"type":15,"tag":48,"props":642,"children":643},{"class":76,"line":383},[644],{"type":15,"tag":48,"props":645,"children":646},{"class":87},[647],{"type":27,"value":648},"    ],\n",{"type":15,"tag":48,"props":650,"children":651},{"class":76,"line":392},[652],{"type":15,"tag":48,"props":653,"children":654},{"class":87},[655],{"type":27,"value":656},"    optimization: {\n",{"type":15,"tag":48,"props":658,"children":659},{"class":76,"line":401},[660,665],{"type":15,"tag":48,"props":661,"children":662},{"class":87},[663],{"type":27,"value":664},"        realContentHash: ",{"type":15,"tag":48,"props":666,"children":667},{"class":103},[668],{"type":27,"value":669},"true\n",{"type":15,"tag":48,"props":671,"children":673},{"class":76,"line":672},11,[674],{"type":15,"tag":48,"props":675,"children":676},{"class":87},[677],{"type":27,"value":678},"    }\n",{"type":15,"tag":48,"props":680,"children":682},{"class":76,"line":681},12,[683],{"type":15,"tag":48,"props":684,"children":685},{"class":87},[686],{"type":27,"value":687},"};",{"type":15,"tag":36,"props":689,"children":691},{"className":690},[39],[692,704,730],{"type":15,"tag":36,"props":693,"children":695},{"className":694},[45],[696,702],{"type":15,"tag":48,"props":697,"children":699},{"className":698},[51],[700],{"type":27,"value":701},"4",{"type":27,"value":703}," Replace utilities import",{"type":15,"tag":150,"props":705,"children":706},{},[707,709,714,716,721,723,728],{"type":27,"value":708},"If existing, replace the ",{"type":15,"tag":156,"props":710,"children":711},{},[712],{"type":27,"value":713},"utilities.scss",{"type":27,"value":715}," import from your ",{"type":15,"tag":156,"props":717,"children":718},{},[719],{"type":27,"value":720},"main.ts",{"type":27,"value":722}," file with the ",{"type":15,"tag":156,"props":724,"children":725},{},[726],{"type":27,"value":727},"uno.css",{"type":27,"value":729}," import.",{"type":15,"tag":60,"props":731,"children":734},{"className":732,"code":733,"language":168,"meta":7},[166],"- import '@inkline/inkline/css/utilities.scss?inline';\n+ import 'uno.css';\n",[735],{"type":15,"tag":68,"props":736,"children":737},{},[738],{"type":15,"tag":60,"props":739,"children":740},{"__ignoreMap":7},[741,770],{"type":15,"tag":48,"props":742,"children":743},{"class":76,"line":77},[744,749,753,757,761,766],{"type":15,"tag":48,"props":745,"children":746},{"class":181},[747],{"type":27,"value":748},"-",{"type":15,"tag":48,"props":750,"children":751},{"class":87},[752],{"type":27,"value":90},{"type":15,"tag":48,"props":754,"children":755},{"class":181},[756],{"type":27,"value":184},{"type":15,"tag":48,"props":758,"children":759},{"class":87},[760],{"type":27,"value":90},{"type":15,"tag":48,"props":762,"children":763},{"class":93},[764],{"type":27,"value":765},"'@inkline/inkline/css/utilities.scss?inline'",{"type":15,"tag":48,"props":767,"children":768},{"class":87},[769],{"type":27,"value":208},{"type":15,"tag":48,"props":771,"children":772},{"class":76,"line":211},[773,778,782,786,790,795],{"type":15,"tag":48,"props":774,"children":775},{"class":181},[776],{"type":27,"value":777},"+",{"type":15,"tag":48,"props":779,"children":780},{"class":87},[781],{"type":27,"value":90},{"type":15,"tag":48,"props":783,"children":784},{"class":181},[785],{"type":27,"value":184},{"type":15,"tag":48,"props":787,"children":788},{"class":87},[789],{"type":27,"value":90},{"type":15,"tag":48,"props":791,"children":792},{"class":93},[793],{"type":27,"value":794},"'uno.css'",{"type":15,"tag":48,"props":796,"children":797},{"class":87},[798],{"type":27,"value":799},";",{"type":15,"tag":36,"props":801,"children":803},{"className":802},[39],[804,816,821],{"type":15,"tag":36,"props":805,"children":807},{"className":806},[45],[808,814],{"type":15,"tag":48,"props":809,"children":811},{"className":810},[51],[812],{"type":27,"value":813},"5",{"type":27,"value":815}," Enjoy on-demand utility classes!",{"type":15,"tag":150,"props":817,"children":818},{},[819],{"type":27,"value":820},"That's it! You can now enjoy to ease and efficiency of on-demand utility classes in your Inkline project.",{"type":15,"tag":150,"props":822,"children":823},{},[824],{"type":15,"tag":825,"props":826,"children":828},"a",{"href":827},"/docs/add-ons/unocss",[829],{"type":27,"value":830},"Read more about the UnoCSS Preset",{"type":15,"tag":832,"children":833},"style",[834],{"type":27,"value":835},".ct-762058{color:#6F42C1;}\n.dark-theme .ct-762058{color:#B392F0;}\n.ct-553616{color:#24292E;}\n.dark-theme .ct-553616{color:#E1E4E8;}\n.ct-952708{color:#032F62;}\n.dark-theme .ct-952708{color:#9ECBFF;}\n.ct-617022{color:#005CC5;}\n.dark-theme .ct-617022{color:#79B8FF;}\n.ct-149352{color:#D73A49;}\n.dark-theme .ct-149352{color:#F97583;}",{"title":7,"searchDepth":211,"depth":211,"links":837},[838],{"id":24,"depth":211,"text":9,"children":839},[840],{"id":31,"depth":241,"text":34},"markdown","content:docs:add-ons:unocss:webpack.md","content","docs/add-ons/unocss/webpack.md","md",1794582262095]