Buna ziua tuturor! Astăzi vom continua să studiem pachetul web. Anume - ne vom ocupa de stiluri și de modurile modulare.
Mai întâi, să instalăm pluginuri
Acest plugin trebuie să vă asigurați că webpack-ul poate funcționa cu css. Al doilea plugin de care avem nevoie este css-loader
Avem nevoie de aceste două pachete pentru ca webpack-ul să încarce și să analizeze fișierele css.
Acum trebuie să adăugăm încă un încărcător la configurația noastră
În test scrieți un obișnuit pentru a face fișiere webpack parsil css. Vom plasa $, deoarece acesta va fi sfârșitul expresiei, deși acest lucru nu este, în principiu, necesar. Și adăugați încărcătorul: "stil! Css". S-ar putea scrie, de asemenea, un stil-loader | css-loader, dar webpack acceptă versiunea abreviată a înregistrării.
Acum, să creăm fișierul main.css și să scriem câteva stiluri, de exemplu, în corp
Și, conectați-o acum la main.js
Acum, dacă ne vom înregistra în consola
și uita-te în browser, vom vedea că stilul nostru a aplicat și pagina a devenit gri.
Acum, să ne uităm la ele. După cum vedem - am adăugat un nou stil inline în capul nostru, care este stilul nostru pentru corp. Acest lucru sugerează că toate stilurile pe care le adăugăm prin importul css sunt preluate din fișierele css și inserate în pagină în linie. Acest lucru nu este întotdeauna convenabil, astfel încât și webpack-ul vă permite să generați un fișier css separat și conectați-l doar la index.html.
De asemenea, vă puteți întreba: „Și cum să organizeze css, în cazul în care, de exemplu, putem cere un modul de clasă pentru corp - fundal: gri, și un alt - fond: roșu și, prin urmare, să-l redefini?“. Asta nu a apărut - vă recomand să folosiți o astfel de abordare a dezvoltării în CSS ca metodologie BEM. Acest lucru vă va ajuta să faceți codul modular, și merge bine și cu modularitatea pachetului Web.
Acum, să creăm un fișier css separat. Pentru aceasta trebuie să facem mai multe lucruri. În primul rând, trebuie să punem plug-in-ul
Acest plugin este necesar pentru noi, astfel încât să putem pune toate css-ul nostru într-un fișier bundle.css.
Acum, în fișierul de configurare din partea de sus vom scrie
Acum, înlocuiți unul dintre încărcătoarele descrise mai devreme pentru fișierele css de pe încărcător: ExtractTextPlugin.extract () și treceți parametrii încărcătorului de stil și css-loader ca parametri
Acum, tot ce ne trebuie este conectarea plugin-urilor, care vor fi o serie suplimentară de plug-in-uri pe care vrem să le conectăm la webpack-ul nostru
bundle.css este numele fișierului nostru css care va fi generat automat.
Fugiți în consola
și așa cum vedem - nu am creat doar fișierul bundle.js, ci și fișierul bundle.css. Dacă mergem la fișierul bundle.css, vedem că a fost generat din fișierul nostru principal.css. Și, ce e cu adevărat cool, dacă conduci consola
și va schimba unele fișiere, de exemplu, modificări la main.css
atunci vom vedea în consola că ambele fișiere au fost imediat recompilate. Și dacă privim browserul acum, vom vedea că stilurile nu au funcționat pentru noi, deoarece fișierul css nu este conectat la index.html. Să o conectăm
Acum, când actualizăm browserul, vom vedea că toate stilurile sunt preluate și culoarea corpului devine roșie. Putem schimba înapoi la gri. În același timp, am lucrat la actualizare și la actualizarea paginii - vom vedea modificările.
După cum puteți vedea, webpack-ul funcționează cu ușurință cu css și ne permite să folosim două abordări pentru aceasta: să adăugăm stiluri inline sau să generăm un fișier și să lucrăm direct cu acesta. Acest lucru este destul de convenabil și, așa cum vedem, de exemplu, alergători, cum ar fi grunt sau gulp, atunci când utilizați webpack - nu sunt deosebit de necesare, deoarece webpack este destul de auto-suficiente.
Acum o lună
Buna ziua, spune-mi, te rog. Când vă prescriu un încărcător: # x27; sourceMap # x27; pentru CSS dezvolta: încărcător:!?! `` stil css $ sass` Există o problemă, toate stilurile din fișierul index.scss unul importiruyutsya în browser-ul indică faptul că stilurile de componente specifice sunt conectate cu privire la principalele stiluri de fișier index.scss, modul de a face era clar din ce fișier am importa stiluri pentru o componentă? Mulțumesc!
Articole similare
Trimiteți-le prietenilor: