Складальник модулів webpack

Всім привіт! Сьогодні ми з вами продовжуємо вивчати webpack. А саме - будемо розбиратися зі стилями і з тим, як зробити стилі модульними.

Для початку, давайте встановимо плагіни

Цей плагін нам знадобиться для того, щоб webpack міг валідності працювати з css. Другий плагін, який нам знадобиться це css-loader

Ці два пакети нам потрібні для того, щоб webpack міг завантажити і розпарсити css файли.

Тепер нам необхідно додати ще один loader в наш конфиг

У test ми пишемо регулярку для того, щоб webpack Парс css файли. Поставимо $, так як це буде кінець виразу, хоча це, в принципі, не обов'язково. І додамо loader: 'style! Css'. Ми також могли б повністю написати style-loader | css-loader, але webpack приймає і скорочений варіант запису.

Тепер, давайте створимо файл main.css і запишемо якісь стилі, наприклад, в body

І, тепер підключимо його в наш main.js

Тепер, якщо пропишемо в консолі

і подивимося в браузер, то побачимо що наш стиль применился і сторінка стала сірою.

Тепер давайте поінспектім елементи. Як ми можемо бачити - у нас в head додався новий інлайновий style в якому прописаний наш стиль для body. Це говорить про те, що всі стилі які ми додаємо через обсяги імпорту css - беруться з файлів css і вставляються на сторінку інлайново. Це не завжди зручно, тому webpack дозволяє також генерувати окремий css файл і просто підключати його до index.html.

Також ви можете запитати: "А як же організовувати css, якщо, наприклад, ми можемо поставити у одного модуля class для body - background: grey, а в іншого - background: red і, цим самим, перевизначити його?". Щоб такого не виникло - я рекомендую вам використовувати такий підхід розробки в css як БЕМ методологія. Це допоможе вам робити код модульним і також це відмінно поєднується з модульностью webpack.

Тепер давайте створимо окремий css файл. Для цього нам потрібно зробити кілька речей. По-перше, нам потрібно поставити плагін

Даний плагін нам необхідний для того, щоб ми весь наш css змогли помістити в один файл bundle.css.

Тепер у файлі конфіга в самому верху пропишемо

Тепер, замінимо один з лоадерів, який ми описали раніше для файлів css на loader: ExtractTextPlugin.extract () і в якості параметрів передамо style-loader і css-loader

Тепер, все що нам потрібно - підключити сюди plugins, який буде представляти із себе додатковий масив плагінів, які ми хочемо підключити до нашого webpack

bundle.css - назва нашого css файлу, який буде автоматично генеруватися.

Запускаємо в консолі

і як ми бачимо - у нас створився не тільки файл bundle.js, але і файл bundle.css. Якщо ми зайдемо в файл bundle.css, то побачимо, що він був згенерований з нашого файлу main.css. Причому, що саме класне, якщо ви запустите в консолі

і будете міняти якийсь файл, наприклад, внесемо зміни в main.css

то ми побачимо в консолі, що обидва файли відразу ж перекомпіліровать. І, якщо ми подивимося в браузер зараз, то побачимо, що стилі у нас не застосувались, так як не підключений css файл в index.html. Давайте його підключимо

Тепер, при оновленні браузера, ми побачимо, що всі стилі підхоплюються і колір body став червоним. Ми можемо поміняти його назад на grey. При цьому вотчер у нас відпрацював і при оновленні сторінки - ми побачимо зміни.

Як ми бачимо, webpack легко працює з css і дозволяє нам використовувати для цього два підходу: інлайново додавати стилі, або генерувати файл і вже безпосередньо з ним працювати. Це досить зручно і, як ми бачимо, наприклад, раннери такі як grunt або gulp, при використанні webpack - особливо не потрібні, так як webpack цілком самодостатній.

1 місяць тому назад

Добрий час доби, підкажіть будь ласка. Коли прописую loader: # X27; sourceMap # x27; для CSS develop: loader: `style! css? $! sass` Є проблема, все стилі імпортіруються в один файл index.scss, в браузері показує, що стилі певного компонента підключені щодо основного файлу стилів index.scss, як зробити так, щоб було видно з будь файлу ми імпортуємо стилі для певного компонента? Дякуємо!

Схожі статті