#8 — SASS

Мая

2017

лайка

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

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

yarn add node-sass style-loader css-loader sass-loader -D

1	yarn add node-sass style-loader css-loader sass-loader -D

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

touch webpack/sass.js

1	touch webpack/sass.js

module.exports = function(paths) {
    return {
        module: {
            rules: [
                {
                    test: /\.scss$/,
                    include: paths,
                    use: [
                        'style-loader',
                        'css-loader',
                        'sass-loader'
                    ]
                }
            ]
        }
    };
};

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 и добавим в блок разработки.

const sass = require('./webpack/sass');

if (env === 'development') {
    return merge([
        common,
        ...
        sass()
    ]);
}

const sass = require('./webpack/sass');

if (env === 'development') {

return merge([

common,

...

sass()

]);

}

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

touch source/pages/index/index.scss
touch source/pages/blog/blog.scss
touch source/components/menu/menu.scss

touch source/pages/index/index.scss

touch source/pages/blog/blog.scss

touch source/components/menu/menu.scss

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

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;
  }
}

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-файлы.

menu.js
import './menu.scss';

index.js
import './index.scss';

blog.js
import './blog.scss';

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
✔ Получить профессию «Веб-разработчик»
✔ Прокачаться на «Продвинутом курсе по веб-разработке»
✔ Подписывайтесь на канал, новые видео выходят каждую неделю.

Sass scss Webpack вебпак Видеокурс Видеоурок

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

Делись:

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

One thought on “#8 — SASS”

Bombit:

29.06.2017 в 18:30

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

Войдите, чтобы ответить

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

Для отправки комментария вам необходимо авторизоваться.