Wie lade ich CSS-Stylesheets ordnungsgemäß in Node-, Express- und EJS-Anwendungen?

CSS in Node-, Express- und EJS-Anwendungen einbetten

Viele Entwickler haben Schwierigkeiten, CSS-Stylesheets in ihre mit Node, Express erstellten Webanwendungen zu laden , und EJS. Dieser Artikel bietet eine umfassende Lösung für dieses häufige Problem.

Problembeschreibung:

Trotz der Befolgung der dokumentierten Anweisungen stoßen Benutzer weiterhin auf Schwierigkeiten beim Laden von CSS-Dateien. Auf die Datei „styles.css“ kann weiterhin nicht zugegriffen werden und die Entwicklertools zeigen an, dass der Typ des Elements auf „text/html“ und nicht auf „text/css“ festgelegt ist.

Lösung:

Um dieses Problem zu beheben, ändern Sie die express.static-Middleware in Ihrer app.js-Datei wie folgt:

<code class="javascript">app.use(express.static(__dirname + '/public'));</code>

Dadurch wird sichergestellt, dass die statischen Dateien aus dem öffentlichen Verzeichnis im Stammverzeichnis des bereitgestellt werden Projekt.

CSS-Einbindung in EJS:

Nach der Konfiguration der Middleware können Sie die CSS-Datei wie folgt in Ihre EJS-Vorlage einbinden:

<code class="ejs"><link rel="stylesheet" type="text/css" href="css/style.css"></code>

Beachten Sie, dass Sie vor dem CSS-Dateinamen keinen führenden Schrägstrich (/) einfügen sollten. Dies ist entscheidend, damit der Browser das Stylesheet korrekt erkennt und lädt.

Durch die Implementierung dieser Änderungen können Sie CSS-Stylesheets nahtlos in Ihre Node-, Express- und EJS-Anwendungen integrieren.

Das obige ist der detaillierte Inhalt vonWie lade ich CSS-Stylesheets ordnungsgemäß in Node-, Express- und EJS-Anwendungen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!