Webpack kollektor modulok
Hello mindenkinek! Ma továbbra is vizsgálja webpack. Nevezetesen - fogunk foglalkozni a stílusok és hogyan lehet egy moduláris módon.
Először is nézzük telepíti a bővítményt
Ez a plugin, meg kell webpack érvényesen dolgozni css. A második bővítmény, hogy szükségünk van egy css-rakodó
Ez a két csomag van szükségünk ahhoz, hogy webpack lehet letölteni és feldolgozni css fájlokat.
Most arra van szükség, hogy adjunk még egy, hogy a rakodó konfiguráció
A vizsgálat írunk alapszakaszban a webpack Pars css fájlokat. Azt hogy $, mivel ez lesz a vége a kifejezés, de ez elvileg nem szükséges. És add rakodó: 'stílus css!'. Azt is levelet teljesen style-rakodó | css-rakodógép, de webpack fogadja és rövidített változata a felvételt.
Most hozzunk létre egy fájlt, és írd main.css néhány stílus, például a szervezetben
És most csatlakoztassa a main.js
Most, ha előírják, hogy a konzol
és nézze meg a böngésző, láthatjuk, hogy a stílust alkalmazunk, és az oldal megőszült.
Most poinspektim elemekkel. Ahogy meglátjuk - a fejünkben hozzáadása inlaynovy új stílus, amely meghatározza a stílust a szervezet számára. Azt mondja, hogy az összes stílust, amit adjunk át import css - css fájlok venni és beilleszteni az oldalra inlaynovo. Ez nem mindig kényelmes, így webpack is generál egy külön css fájlt, és egyszerűen csatlakoztassa a index.html.
Is, akkor a kérdést: „És hogyan kell megszervezni css, ha például, akkor felmerül a kérdés egyik osztály modul a test - háttér: szürke, és egy másik - háttér: vörös, és ezzel, hogy újra meg?”. Ennek elkerülése érdekében történt - azt javasoljuk, hogy ezt a módszert alkalmazza a fejlesztés a css a BEM módszertan. Ez segít, hogy a kód moduláris, és ez is tökéletesen kompatibilis modularitás webpack.
Most hozzunk létre egy külön css fájlt. Ehhez meg kell csinálni néhány dolgot. Először is, meg kell tenni a dugó
Ez a plugin, biztosítanunk kell, hogy megkapjuk az összes CSS lehetne helyezni egy bundle.css fájlt.
Most a konfigurációs fájlban a tetején előírni
Most cserélje egyik rakodógépek, amit korábban leírt a css fájlokat a rakodó: ExtractTextPlugin.extract (), és a paraméterek, így style-rakodó és css-rakodó
Most már csak - csatlakozni itt a plugin, melyik lesz a további olyan bővítmények, hogy szeretnénk csatlakozni a webpack
bundle.css - a nevét a css fájl automatikusan generálódik.
Fuss konzol
és ahogy láthatjuk - hoztunk létre nemcsak bundle.js fájlt, de bundle.css fájlt. Ha megyünk bundle.css fájlt, akkor láthatjuk, hogy keletkezett a mi main.css fájlt. És ez a nagy dolog, ha fut a konzol
és meg fog változni néhány fájlt, például változások a main.css
látni fogjuk, a konzol, hogy mind a fájlok azonnal újrafordítani. És ha megnézzük a böngésző most látjuk, hogy ez a stílus már nem alkalmazható, mivel nem kapcsolódik css fájlt index.html. Nézzük csatlakozni
Most, amikor a böngésző frissítését, azt látjuk, hogy az összes stílus és a színek felvette test elvörösödött. Meg tudjuk változtatni vissza a szürke. Ugyanakkor dolgoztunk votcher és frissítse az oldalt - fogjuk látni a változásokat.
Ahogy meglátjuk webpack könnyű vele dolgozni, css, és lehetővé teszi számunkra, hogy használja ezt a két módon: add inlaynovo stílusok, vagy létrehoz egy fájlt, és már közvetlenül vele. Ez nagyon kényelmes, és mint látjuk, például futók mint röfög vagy korty, a webpack - főleg nem kell, mint webpack egészen önellátó.
1 hónapja ezelőtt
Jó napszak, kérem, mondja meg. Amikor előírni rakodó: # X27; sourceMap # X27; CSS fejlesztése: rakodó:!?! `stílus css $ sass` Van egy probléma, az összes stílus egy importiruyutsya index.scss fájlt a böngésző azt jelzi, hogy egy adott alkatrész stílusok vannak kötve tekintetében a fő fájl index.scss stílusok, hogyan lehet világos volt, milyen fájlt is importálhat stílust egy alkatrész? Köszönjük!