Здравейте на всички! Днес ще продължи да проучва WebPACK. А именно - ние ще се справим с стилове и как да се направи модулен принцип.
Първо, нека да я инсталирайте
Тази приставка, ние трябва да WebPACK биха могли валидно да работи с CSS. Вторият плъгин, че имаме нужда е CSS-товарач
Тези два пакета от които се нуждаем, за да може да WebPACK изтегляне и разбор на CSS файлове.
Сега ние трябва да добавим още един, за да ни товарач конфигурация
В теста пишем редовен сезон в WebPACK Парс CSS файлове. Ние събрахме $, тъй като това ще бъде в края на израза, но това е по принцип не е необходимо. И добави товарач: "! Стил CSS". Ние също може да напише изцяло стил-товарач | CSS-товарач, но WebPACK получава и съкратен вариант на записа.
Сега, нека да създадете файл и пишат main.css някои стилове, например, в тялото
И сега ние го свържете с нашите main.js
Сега, ако предписва на конзолата
и погледнете в браузъра, можем да видим, че нашите стилове се прилагат и страницата ми побеляха.
Сега нека poinspektim елементи. Както можем да видим - в главата ни Добави inlaynovy нов стил, който определя стила ни за тялото. Той казва, че всички стилове, които начисляваме чрез внос CSS - CSS файлове са взети от и вкарани в inlaynovo на страницата. Тя не винаги е удобно, така WebPACK също може да генерира отделен CSS файл и просто да го свържете към index.html.
Също така, можете да попитате: "А как да се организира CSS, ако, например, можем да попитам един клас модул за тялото - фон: сив, а друга - на фона: червено и по този начин, за да го предефинират?". За да се избегне това се е случило - препоръчвам ви да използвате този подход е разработването на СГО и на методологията BEM. Това ще ви помогне да извлечете код модулните, а също така е напълно съвместим с модулност WebPACK.
Сега нека да създадете отделен CSS файл. За да направите това, което трябва да направим няколко неща. На първо място, ние трябва да поставите щепсела
Тази приставка, трябва да сме сигурни, че имаме цялата ни CSS може да бъде поставен в един bundle.css файл.
Сега в конфигурационния файл в горната предписват
Сега на мястото на един от най-товарачи, които описахме по-рано за CSS файлове на зареждане на: ExtractTextPlugin.extract () и като параметри, за да се даде стил-товарач и CSS-товарач
Сега всичко, което трябва - за да се свържете тук плъгини, които ще бъдат на допълнителен набор от приставки, които искаме да се свържете с нашия WebPACK
bundle.css - името на нашия CSS файл, който ще се генерира автоматично.
Тичане в конзола
и както можем да видим - ние сме създали не само bundle.js файл, но bundle.css файл. Ако отидем в bundle.css файл, можем да видим, че тя е произведена от нашия main.css файл. И това е най-важното, ако ви свършат на конзолата
и ще се промени някой файл, например, промени в main.css
ще видим в конзолата, че двата файла веднага компилирате. И, ако се вгледаме в браузъра сега, ние виждаме, че стилът ние не се прилага, тъй като не са свързани CSS файл, за да index.html. Нека да се свърже
Сега, след като надстроите вашия браузър, можем да видим, че всички стилове и цветове се качват тялото почервеня. Можем да я върнете обратно към Грей. В същото време сме работили votcher и опреснете страницата - ще видим промени.
Както можем да видим, WebPACK лесно да се работи с CSS и ни позволява да използваме тези два начина: добави inlaynovo стилове или генериране на файл и вече директно с него. Това е доста удобно и, както виждаме, например, бегачи като сумтене или глътка, като се използват WebPACK - особено не се нуждаят, както WebPACK доста самодостатъчна.
преди 1 месец преди
Добро време на деня, моля да ми кажете. Когато се разпореди товарач: # X27; sourceMap # X27; за CSS развие: товарач:!?! `стил CSS $ sass` Има проблем, всички стилове в един importiruyutsya index.scss файл в браузъра показва, че специфични стилове на компонентите са свързани по отношение на основните стилове файл index.scss, как да се направи това стана ясно от това, което ние внасяме файл стиловете за компонент? Благодарим Ви!
Свързани статии