Компиляция Sass для нескольких блоков с конфигурацией webpack

В этой статье показан пример использования файлов Sass, которые мы настроили в статье «Расширение конфигурации веб-пакета WordPress Create Block Script с несколькими блоками в одном плагине». Если вы не читали эту статью, пожалуйста, сначала прочтите ее.

Эта статья предназначена для более старой версии скрипта создания блока.

Хотя теорию все еще можно применять, некоторая информация в этой статье может быть несовместима с последним скриптом создания блока. Вы можете просмотреть наше обновленное Руководство по созданию скриптов блоков здесь.

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

Настройка нескольких блоков

Как я упоминал в предыдущей статье, добавление импорта Sass в индекс плагина позволяет нам определить несколько блоков внутри плагина, каждый со своими собственными editor.scssфайлами 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файл.