Получить бесплатную консультацию
Оставьте свои контакты, и с Вами
свяжутся наши специалисты
Заявка успешно отправлена!
С вами свяжется наш консультант :)
Произошла какая-то ошибка, пожалуйста, обновите страницу и попробуйте снова.
Средний
14 уроков
Курс
Webpack 2
Webpack 2 — один из самых мощных и гибких инструментов для frontend-сборки. В чем его преимущества, какие проблемы он решает и как с ним работать — в практическом видеокурсе от основателя LoftSchool&LoftBlog Дмитрия Ковальчука.

#9 — Подключение CSS-модулей

Всем привет! Меня зовут Ковальчук Дмитрий. Вы смотрите Лофтскул. Мы продолжаем изучать Webpack.
Мы научились подключать SCSS-файлы и конвертировать их в CSS. А что если нам нужно подключить CSS-библиотеку?

Установим normalize.css.

Создадим файл для конфигурации.

webpack/css.js

css-loader добавляет CSS-модули в граф зависимостей;
style-loader добавляет стили в DOM-дерево при помощи тега ˂style˃.

webpack.config.js

index.js, blog.js

Таким образом, мы подключили к нашему проекту normalize.css. По традиции сделаем коммит.

На этом завершится девятый видеоурок курса по изучению Webpack 2.

Приятного всем просмотра! Учитесь с удовольствием!

ツПолезные ссылки к видеоуроку:
✔ Исходники на GitHub
✔ Видеоурок по Yarn
✔ Получить профессию «Веб-разработчик»
✔ Прокачаться на «Продвинутом курсе по веб-разработке»
✔ Подписывайтесь на канал, новые видео выходят каждую неделю.

Материалы к уроку:
Делись:

Оставь комментарий!

One thought on “#9 — Подключение CSS-модулей

  1. sam1612:

    Добрый день. Просмотрел ваш курс по webpack и решил воспроизвести в своём проекте. Но столкнулся со странной проблемой: при формировании html из pug+scss всё работает нормально кроме того, что все css-файлы прицепляются ко всем html (если страниц две, то в оба html добавится оба css, с тремя аналогично). За основу взял ваш конфиг с минимальными правками, в основном на уровне имён файлов и файловой структуры.

    В принципе, css ожидается не слишком большой, так что можно единый файл прицепить к каждой странице, но хотелось бы понять в чём проблема: не уютно пользоваться инструментом, который ведёт себя непредсказуемым образом.

    ps Поведение одинаково, что в девелопе, когда стили интегрируются в head, что в «продакшне», когда стили выносятся в самостоятельные файлы. Сам файлы стилей в норме, но линкуются в html всем скопом

Добавить комментарий

Рекомендуемые курсы