#8 — SASS
Всем привет! Меня зовут Ковальчук Дмитрий. Вы смотрите Лофтскул. Мы продолжаем изучать webpack. Сейчас мы научимся работать с SASS при помощи Webpack.
Начнём с установки “node-sass” для компиляции scss в css и лоадеров, о предназначении которых я рассказывал ещё во вступлении к этому курсу.
|
1 |
yarn add node-sass style-loader css-loader sass-loader -D |
Создадим модуль для вебпак-конфига sass.js
|
1 |
touch webpack/sass.js |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
module.exports = function(paths) { return { module: { rules: [ { test: /\.scss$/, include: paths, use: [ 'style-loader', 'css-loader', 'sass-loader' ] } ] } }; }; |
Кратко напомню, как вебпак работает с лоадерами. Когда он встречает файлы с расширением scss, к ним будут применены лоадеры. Напомню также, что лоадеры выполняются снизу вверх или справа налево.
- sass-loader комилирует SCSS в CSS;
- css-loader добавляет CSS модули в граф зависимостей
- style-loader — добавляет стили в DOM-дерево при помощи тега ˂style˃
Вызовем sass.js в webpack.config.js и добавим в блок разработки.
|
1 2 3 4 5 6 7 8 9 |
const sass = require('./webpack/sass'); if (env === 'development') { return merge([ common, ... sass() ]); } |
В папке с каждой страницей и с компонентом меню создадим соответствующие SCSS-файлы.
|
1 2 3 |
touch source/pages/index/index.scss touch source/pages/blog/blog.scss touch source/components/menu/menu.scss |
В каждом файле зададим свой цвет заголовка h1. Цвета любые, на ваше усмотрение.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
index.scss h1{ color: brown; } blog.scss h1{ color: green; } menu.scss ul{ border: 1px solid #777; li{ display: inline-block; padding: 5px 10px; background: #bbb; } } |
Подключим созданные SCSS-файлы в соответствующие js-файлы.
|
1 2 3 4 5 6 7 8 |
menu.js import './menu.scss'; index.js import './index.scss'; blog.js import './blog.scss'; |
Запустим webpack-dev-server и посмотрим, что изменилось. С главной страницей всё в порядке. С blog.html также. Давайте посмотрим исходный код.
Обратите внимание, что скомпилированный CSS-код добавляется в тег ˂head˃ не как ссылка на файл, а инлайном, в тег ˂style type=»text/css»˃.
Возможно, это неплохой вариант для разработки, но для продакшена нам хотелось бы видеть отдельно скомпилированные файлы.
Традиционно сделаем коммит, перед тем как перейти к новой теме.
На этом восьмой видеоурок курса по изучению Webpack подойдет к концу.
Приятного всем просмотра! Учитесь с удовольствием!
ツПолезные ссылки к видеоуроку:
✔ Исходники на GitHub
✔ Видеоурок по Yarn
✔ Получить профессию «Веб-разработчик»
✔ Прокачаться на «Продвинутом курсе по веб-разработке»
✔ Подписывайтесь на канал, новые видео выходят каждую неделю.
Оставь комментарий!
One thought on “#8 — SASS”
Добавить комментарий
Для отправки комментария вам необходимо авторизоваться.
Наверное стоило еще уделить время babel, ибо вы тут так спокойно юзаете es6, хотя на продакшене всегда нужна поддержка ie10+