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

#8 — SASS

Всем привет! Меня зовут Ковальчук Дмитрий. Вы смотрите Лофтскул. Мы продолжаем изучать webpack. Сейчас мы научимся работать с SASS при помощи Webpack.

Начнём с установки “node-sass” для компиляции scss в css и лоадеров, о предназначении которых я рассказывал ещё во вступлении к этому курсу.

Создадим модуль для вебпак-конфига sass.js

Кратко напомню, как вебпак работает с лоадерами. Когда он встречает файлы с расширением scss, к ним будут применены лоадеры. Напомню также, что лоадеры выполняются снизу вверх или справа налево.

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

Вызовем sass.js в webpack.config.js и добавим в блок разработки.

В папке с каждой страницей и с компонентом меню создадим соответствующие SCSS-файлы.

В каждом файле зададим свой цвет заголовка h1. Цвета любые, на ваше усмотрение.

Подключим созданные SCSS-файлы в соответствующие js-файлы.

Запустим webpack-dev-server и посмотрим, что изменилось. С главной страницей всё в порядке. С blog.html также. Давайте посмотрим исходный код.

Обратите внимание, что скомпилированный CSS-код добавляется в тег ˂head˃ не как ссылка на файл, а инлайном, в тег ˂style type=»text/css»˃.

Возможно, это неплохой вариант для разработки, но для продакшена нам хотелось бы видеть отдельно скомпилированные файлы.

Традиционно сделаем коммит, перед тем как перейти к новой теме.

На этом восьмой видеоурок курса по изучению Webpack подойдет к концу.

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

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

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

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

One thought on “#8 — SASS

  1. Bombit:

    Наверное стоило еще уделить время babel, ибо вы тут так спокойно юзаете es6, хотя на продакшене всегда нужна поддержка ie10+

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

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