Компіляція Sass для кількох блоків за допомогою Webpack Config

У цій статті показано приклад використання файлів Sass, які ми налаштували в статті Розширення конфігурації веб-пакета WordPress Create Block Script кількома блоками в одному плагіні. Якщо ви не читали цю статтю, прочитайте її спочатку.

Ця стаття стосується старішої версії сценарію створення блоку

Хоча цю теорію все ще можна застосувати, деяка інформація в цій статті може бути несумісною з останнім сценарієм створення блоку. Ви можете переглянути наш оновлений Посібник зі створення сценарію блоку тут.

У нас також є оновлений посібник щодо додавання додаткових точок входу до webpack, щоб ви могли створити кілька файлів CSS.

Налаштування кількох блоків

editor.scssЯк я згадував у попередній статті, додавання імпорту Sass до індексу плагіна дозволяє нам визначати кілька блоків у плагіні, кожен зі своїми style.scssфайлами.

Конфігурація веб-пакета, яку ми налаштували, візьме файли editor.scssта style.scssдля кожного блоку та скомпілює їх у файли /editor.cssта /style.cssв корені плагіна.

Щоб спробувати це, давайте перемістимо файли /src/index.jsта /src/scssпапки та в /src/blocks/block-one, а потім скопіюємо цей блок у /src/blocks/block-two. Нарешті створіть новий файл за адресою /src/index.js.

Тепер ви повинні мати таку файлову структуру:

• /src

  • /blocks

    • /block-one

      • /scss

        • /editor.scss
        • /style.scss
      • /index.js

    • /block-two/

      • /scss
        • /editor.scss
        • /style.scss
      • /index.js
    • /index.js

Тоді давайте внесемо деякі незначні зміни, /block-twoщоб він був зареєстрований як унікальний блок. Просто змініть наступний рядок у /src/blocks/block-two/index.jsфайлі з:

registerBlockType( 'wcltd/wholesome-notes', {

до:

registerBlockType( 'wcltd/wholesome-notes-2', {

і змініть назву файлу з Wholesome Notesна Wholesome Notes 2:

    title: __(
        'Wholesome Notes 2',
        'wcltd'
    ),

Зміна Sass

У /src/blocks/block-two/scss/editor.scssта /src/blocks/block-two/scss/style.scssвнесіть деякі незначні поправки, щоб ми розпізнавали зміни у скомпільованих файлах.

Крім того, давайте не забудемо змінити класи в цих файлах, щоб використовувати новий простір імен .wp-block-wcltd-wholesome-notes-2.

Ось які поправки я вніс:

/src/blocks/block-two/scss/editor.scss

.wp-block-wcltd-wholesome-notes-2 {
    border: 1px dotted #0f0;
}

/src/blocks/block-two/scss/style.scss

.wp-block-wcltd-wholesome-notes-2 {
    background-color: #fff;
    color: #000;
    padding: 2px;
}

Нічого особливого, я просто змінив кілька кольорів.

Налаштування індексного файлу

Тепер редагуємо файл за адресою /src/blocks/index.js. Нам просто потрібно імпортувати два створені нами блоки:

import './blocks/block-one/index';
import './blocks/block-two/index';

Перегляд результатів

Тепер давайте запустимо npm startі подивимось результати виведених файлів.

Файл /editor.cssвиглядає так:

.wp-block-wcltd-wholesome-notes {
  border: 1px dotted #f00; }

.wp-block-wcltd-wholesome-notes-2 {
  border: 1px dotted #0f0; }

Подивіться, як Sass з editor.scssфайлів кожного блоку в плагіні було зібрано в цей єдиний /editor.cssфайл.

Тепер подивимося на /style.cssфайл:

.wp-block-wcltd-wholesome-notes {
  background-color: #000;
  color: #fff;
  padding: 2px; }

.wp-block-wcltd-wholesome-notes-2 {
  background-color: #fff;
  color: #000;
  padding: 2px; }

Ви бачите, що style.scssфайли кожного блоку в плагіні скомпільовані в цей єдиний /style.cssфайл.