Dieser Artikel zeigt Ihnen, wie Sie CSS wie JS-Module importieren

Vorwort

Die gerade veröffentlichte Version 93 von Chrome verfügt über eine spannende neue Funktion: CSS Module Script, mit dem Sie CSS-Stile laden können, als würden Sie ein JavaScript-Modul importieren.

Sie können dann CSS-Stile auf das Dokument und den Shadow-Dom auf die gleiche Weise wie ein erstellbares Stylesheet anwenden, was bequemer und effizienter ist als andere Möglichkeiten zum Laden von CSS.

Was sind erstellbare Stylesheets?

Bevor wir uns mit dem CSS-Modulskript befassen, wollen wir zunächst verstehen, was ein erstellbares Stylesheet ist. Wie der Name schon sagt, ist es so konzipiert, dass es direkt mit CssStyleSheet erstellt werden kann und sowohl im Dokument- als auch im Schatten-DOM verwendet werden kann.

Verwenden eines erstellbaren Stylesheets:

• Erstellen Sie ein Stylesheet über new CSSStyleSheet()
• Ändern des konfigurierbaren Stylesheets
• Verwenden von konstruierbaren Stylesheets über adoptedStyleSheets
  

Die API zum Ändern des konstruierbaren Stylesheets lautet wie folgt:

• insertRule(rule, index) fügt eine Regel in das cssRules-Attribut ein
• deleteRule(rule, index) Regel aus der cssRules-Eigenschaft löschen
• replace(text) ersetzt asynchron cssRules
• replaceSync(text) Synchroner Ersatz
  

// Das CSSStyleSheet erstellen
const stylesheet = neues CSSStyleSheet();
 
// Füge etwas CSS hinzu
stylesheet.replaceSync('body { Hintergrund: #000 !wichtig; }')
// ODER stylesheet.replace, das stattdessen ein Promise zurückgibt
 
// Sagen Sie dem Dokument, dass es Ihr neues Stylesheet übernehmen soll.
// Beachten Sie, dass dies auch mit Shadow Roots funktioniert.
document.adoptedStyleSheets = [...document.adoptedStyleSheets, Stylesheet];

Verwenden des CSS-Modulskripts

Das einführende CSS-Modulskript wirkt sich wie folgt auf Dokument und Shadow-Dom aus:

Blatt aus „./styles.css“ importieren, assert { Typ: „css“ };
document.adoptedStyleSheets = [Blatt];
shadowRoot.adoptedStyleSheets = [Blatt];

Der Standardexport des CSS-Modulskripts ist ein erstellbares Stylesheet und verwendet wie jedes andere erstellbare Stylesheet „Adoptstylesheet“, um auf Dokument und Shadow-Dom einzuwirken.

Im Gegensatz zu anderen Möglichkeiten der Einbindung von CSS mit JavaScript müssen Sie weder ein <script>-Tag erstellen, noch müssen Sie das CSS in das verschleierte JavaScript einfügen.

CSS-Module bieten außerdem die gleichen Vorteile wie JavaScript-Module:

• Deduplizierung: Wenn Sie dieselbe CSS-Datei von mehreren Speicherorten in Ihrer App importieren, wird sie trotzdem nur einmal abgerufen, instanziiert und analysiert.
• Einheitliche Reihenfolge: Wenn Sie eine JavaScript-Laufzeitumgebung importieren, kann dies davon abhängen, dass die Stylesheets bereits analysiert werden.
• Sicherheit: Module werden mithilfe von CORS geladen und verwenden eine strenge MIME-Typprüfung.
  

Was sind Importbehauptungen?

Der Assert {type: 'css'}-Teil der Importanweisung ist eine erforderliche Importassertion. Ohne sie wird CSS als normales JavaScript-Modul betrachtet und der Import schlägt fehl, wenn die importierte Datei einen MIME-Typ aufweist, der kein JavaScript ist.

Blatt aus „./styles.css“ importieren; // Modulskript konnte nicht geladen werden:
                                  // Erwartet wurde ein JavaScript-Modul
                                  // Skript, aber der Server hat geantwortet
                                  // mit einem MIME-Typ von „text/css“.

Dynamischer Import von Stylesheets

Ähnlich wie beim dynamischen Import von JavaScript-Modulen können Sie auch CSS-Module mithilfe des dynamischen Imports importieren:

const cssModule = warte auf Import('./style.css', {
  behaupten: { Typ: "css" }
});
: Dokument.adoptedStyleSheets = [cssModul.default];

Hier gibt es jedoch eine Falle, die beachtet werden muss. Was zu adoptedstylesheet hinzugefügt wird, ist nicht das cssModule selbst, sondern cssModule.default.

@import-Regeln werden noch nicht unterstützt

Derzeit gelten die Regeln für CSS @import nicht für erstellbare Stylesheets, einschließlich CSS-Modulskripte. Wenn ein CSS-Modul @import-Regeln enthält, werden diese ignoriert.

/* atImported.css */
div {
    Hintergrundfarbe: blau;
}

/* Stile.css */
@import url('./atImported.css'); /* Im CSS-Modul ignoriert */
div {
    Rand: 1em durchgehend grün;
}

<!-- index.html -->
<Skripttyp="Modul">
    importiere Stile aus „./styles.css“, assert { Typ: „css“ };
    document.adoptedStyleSheets = [Stile];
</Skript>
<div>Dieses Div hat einen grünen Rand, aber keine Hintergrundfarbe.</div>

Derzeit werden die Browser Firefox und Safari nicht unterstützt, aber dies kann in Zukunft erwartet werden~

Zusammenfassen

Dies ist das Ende dieses Artikels zum Importieren von CSS wie zum Importieren von JS-Modulen. Weitere verwandte Inhalte wie zum Importieren von JS-Modulen und CSS finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!