Kompilieren von Sass für mehrere Blöcke mit der Webpack-Konfiguration

Dieser Artikel zeigt ein Beispiel für die Verwendung der Sass-Dateien, die wir im Artikel Erweitern der WordPress Create Block Script-Webpack-Konfiguration mit mehreren Blöcken innerhalb desselben Plugins eingerichtet haben. Wenn Sie diesen Artikel noch nicht gelesen haben, lesen Sie ihn bitte zuerst.

Dieser Artikel bezieht sich auf eine ältere Version des Create Block Scripts

Obwohl die Theorie immer noch angewendet werden kann, sind einige der Informationen in diesem Artikel möglicherweise nicht mehr mit dem neuesten Erstellungsblockskript kompatibel. Sie können unseren aktualisierten Leitfaden zum Erstellen von Blockskripten hier einsehen.

Wir haben auch eine aktualisierte Anleitung zum Hinzufügen zusätzlicher Einstiegspunkte zum Webpack, damit Sie mehrere CSS-Dateien generieren lassen können.

Einrichten mehrerer Blöcke

Wie ich im vorherigen Artikel erwähnt habe, ermöglicht uns das Hinzufügen der Sass-Importe zum Index des Plugins, mehrere Blöcke innerhalb des Plugins zu definieren, jeder mit seinen eigenen editor.scssDateien style.scss.

Die Webpack-Konfiguration, die wir eingerichtet haben, nimmt die editor.scssund style.scss-Dateien für jeden Block und kompiliert sie in die /editor.cssund /style.css-Dateien im Stammverzeichnis des Plugins.

Um dies auszuprobieren, verschieben wir die Dateien /src/index.jsund /src/scssOrdner und in /src/blocks/block-one, kopieren Sie dann diesen Block in /src/blocks/block-two. Erstellen Sie schließlich eine neue Datei unter /src/index.js.

Sie sollten nun folgende Dateistruktur haben:

• /src

  • /blocks

    • /block-one

      • /scss

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

    • /block-two/

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

Nehmen wir dann einige geringfügige Änderungen an vor /block-two, damit es als eindeutiger Block registriert wird. Ändern Sie einfach die folgende Zeile in der /src/blocks/block-two/index.jsDatei ab:

registerBlockType( 'wcltd/wholesome-notes', {

zu:

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

und ändern Sie den Namen der Datei von Wholesome Notesin Wholesome Notes 2:

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

Ändern der Sass

In /src/blocks/block-two/scss/editor.scssund /src/blocks/block-two/scss/style.scssnehmen Sie einige geringfügige Änderungen vor, damit wir die Änderungen in den kompilierten Dateien erkennen.

Vergessen wir auch nicht, die Klassen in diesen Dateien zu ändern, um den neuen Namespace zu verwenden .wp-block-wcltd-wholesome-notes-2.

Hier sind die Änderungen, die ich vorgenommen habe:

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

Nichts Großartiges, ich habe nur ein paar geänderte Farben geändert.

Einrichten der Indexdatei

Jetzt bearbeiten wir die Datei unter /src/blocks/index.js. Wir müssen nur die beiden Blöcke importieren, die wir erstellt haben:

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

Anzeigen der Ergebnisse

npm startLassen Sie uns nun die Ergebnisse der ausgegebenen Dateien ausführen und anzeigen.

Die /editor.cssDatei sieht so aus:

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

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

Sehen Sie, wie die Sass aus den editor.scssDateien jedes Blocks innerhalb des Plugins in diese einzelne /editor.cssDatei kompiliert wurden.

Schauen wir uns nun die /style.cssDatei an:

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

Sie können sehen, dass die style.scssDateien jedes Blocks innerhalb des Plugins in dieser einzigen /style.cssDatei kompiliert wurden.