HTML zeigt kein CSS in NodeJS an-Front-End-Fragen und Antworten-php.cn

HTML zeigt kein CSS in NodeJS an

WBOY

Freigeben： 2023-05-17 12:22:07

Original

734 Leute haben es durchsucht

Bei der Entwicklung mit Node.js stoßen wir manchmal auf das Problem, dass die CSS-Stile in HTML nicht richtig angezeigt werden können. Dieses Problem tritt normalerweise auf, weil wir die CSS-Datei nicht korrekt eingeführt haben oder weil die Standardeinstellungen von Node.js das Problem verursacht haben. In diesem Artikel wird dieses Problem vorgestellt, analysiert und eine Lösung gegeben.

1. Problemanalyse

Bei der Node.js-Entwicklung verwenden wir normalerweise das Express-Framework zum Erstellen des Servers und verwenden EJS oder andere Template-Engines zum Rendern der Seite. Beim Rendern einer Seite führen wir häufig CSS-Dateien über das Link-Tag ein. Der Beispielcode lautet wie folgt:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Node.js</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Hello Node.js!</h1>
  </body>
</html>

Nach dem Login kopieren

Wenn wir die Seite jedoch im Browser öffnen, stellen wir fest, dass die CSS-Datei nicht geladen zu sein scheint Die Seite soll keinen Stil haben. Wie im Bild unten gezeigt:

Zu diesem Zeitpunkt müssen wir die Ursache des Problems analysieren.

2. Lösung

Nach der Analyse gibt es normalerweise zwei Gründe für dieses Problem:

Falscher CSS-Dateipfad

Im obigen Beispielcode verwenden wir die CSS-Datei relativ zur aktuellen Seite Der Pfad, z. B. „styles.css“. Wenn wir die Datei in einem Verzeichnis auf derselben Ebene wie die aktuelle Seite ablegen, sollte der Pfad korrekt sein. Wenn wir die Datei jedoch in einem anderen Verzeichnis ablegen, muss der Pfad geändert werden. Wenn wir die Datei beispielsweise in einem anderen Verzeichnis myStyles/ als der aktuellen Seite ablegen, sollte der korrekte Pfad lauten: href="myStyles/styles.css".

Probleme, die durch die Standardeinstellungen von Node.js verursacht werden

In den Standardeinstellungen von Node.js verwendet das Express-Framework den öffentlichen Ordner als statisches Dateiverzeichnis und .css, .js, .jpg und .png sind standardmäßig eingestellt. Das heißt, wenn wir in einer HTML-Datei auf eine CSS-Datei verweisen möchten, müssen wir die CSS-Datei im öffentlichen Ordner speichern. Im obigen Beispielcode werden unsere CSS-Dateien beispielsweise im Unterverzeichnis „styles/“ im öffentlichen Verzeichnis gespeichert. Wir müssen das Link-Tag wie folgt ändern:

<link rel="stylesheet" href="/styles/styles.css">

Nach dem Login kopieren

Auf diese Weise können die CSS-Dateien normal importiert werden.

3. Zusammenfassung

Durch die obige Einführung und Analyse können wir feststellen, dass es bei der Verwendung von Node.js für die Entwicklung sehr wichtig ist, CSS-Dateien korrekt einzuführen. Wenn die Einführung nicht erfolgreich ist, fehlt der Seite der Stil und das Benutzererlebnis wird beeinträchtigt. Durch die Beherrschung der richtigen Einführungsmethoden können wir hochwertige Websites und Anwendungen besser entwickeln.

Das obige ist der detaillierte Inhalt vonHTML zeigt kein CSS in NodeJS an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!