Всім привіт! Сьогодні ми з вами продовжуємо вивчати 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, як зробити так, щоб було видно з будь файлу ми імпортуємо стилі для певного компонента? Дякуємо!