Wie Blatt globale CSS-Stil beinhaltet mit GatsbyJS

Question

standardmäßig verwenden, drückt GatsbyJS die Verwendung von CSS-Module und benutzerdefinierte CSS-in-js Bibliotheken wie glamorous und typography

Leider bin ich die Portierung einer bestehenden Website GatsbyJS das verwendet traditionelle globale Stylesheets. Der Aufwand, alle vorhandenen HTML-CSS-Instrumente in CSS-Module umzuwandeln, ist mühsam.

Mein aktueller Hack ist die GatsbyJS html.js zu aktualisieren und eine

<link rel="stylesheet" type="text/css" href="/style.old.css" />

Zum Header hinzufügen. Ich habe style.old.css Leben in /public dies wird jedoch ausgelöscht, wenn ein Build ausgeführt wird.

Ich hatte gehofft, dass es ein Plugin geben würde, um dies zu unterstützen, aber scheint das Gatsby-Team entmutigen globale CSS, die für neue Projekte verständlich ist.

Ich habe versucht, ein Plugin zu schreiben, um dies hinzuzufügen, aber begrenzte Ressourcen gefunden, wie man ein "Stil-Plugin" schreibt.

Answer 1

Sie sind nah dran!

Statt style.old.css in /public zu platzieren, platzieren Sie es in /layouts. Dann einfach importieren Sie es in /layouts/index.js wie folgt aus:

import './style.old.css'

Wenn Sie ein neues Projekt gatsby (gatsby new project-name) starten, erhalten Sie eine index.css-Datei in dem Ordner /layouts bemerken, die in layouts/index.js standardmäßig importiert wird. Folgen Sie einfach diesem Beispiel, um Ihre eigenen globalen Stylesheets hinzuzufügen.

Im Allgemeinen sollten Sie nichts in /public direkt platzieren. Wenn Sie möchten, dass statische Dateien im Ordner /public landen, erstellen Sie einen Ordner /static und legen Sie sie dort ab (Gatsby kopiert alle Dateien in /static für Sie).