it-swarm.com.de

Wie kann ich CSS-Dateien mithilfe von Node, Express und EJS einfügen?

Ich versuche, den Anweisungen zu https://stackoverflow.com/a/18633827/2063561 zu folgen, aber ich kann meine styles.css immer noch nicht laden. 

Aus app.js

app.use(express.static(path.join(__dirname, 'public')));

In meinen .ejs habe ich beide Zeilen ausprobiert

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

Weder lädt die css. In der Entwicklerkonsole habe ich festgestellt, dass der Typ auf 'text/html' anstelle von 'text/css' gesetzt ist. 

Mein Weg sieht so aus

.
./app.js
./public
    /css
        /style.css
24
stealthysnacks

Verwenden Sie dies in Ihrer server.js-Datei

app.use(express.static(__dirname + '/public'));

und fügen Sie css wie hinzu

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

nicht brauchen, bevor css gefällt 

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

1.Erstellen Sie einen neuen Ordner mit dem Namen 'public', falls keiner existiert.

2.Erstellen Sie einen neuen Ordner mit dem Namen "css" unter dem neu erstellten "öffentlichen" Ordner

3.Erstellen Sie Ihre CSS-Datei unter dem Pfad public/css

4.Auf Ihrem HTML-Link css d. H. <link rel="stylesheet" type="text/css" href="/css/style.css">

// beachte, dass die href vorher einen Schrägstrich (/) verwendet und du das 'public' nicht einschließen musst

5.Auf Ihren app.js sind: app.use(express.static('public'));

Boom.It works !!

1
Eric Nderitu

Ich habe die folgenden Schritte verwendet, um dieses Problem zu beheben

  1. erstellen Sie einen neuen Ordner (statisch) und verschieben Sie alle Js- und CSS-Dateien in diesen Ordner.
  2. dann fügen Sie app.use ('/ static', express.static ('static')) ein
  3. css hinzufügen wie <link rel = "stylesheet" type = "text/css" href = "/ static/style.css" />
  4. starten Sie den Server neu, um die Auswirkungen nach Änderungen anzuzeigen.
1
sonu singh

verwenden Sie in Ihrer Hauptdatei .js

app.use('/css',express.static(__dirname +'/css'));

verwenden Sie in Ihrer Haupt-HTML-Datei

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

Der Grund dafür, dass Sie eine Fehlermeldung erhalten, weil Sie ein Komma anstelle von concat + hinter __dirname verwenden.

0
White Lantern

Es ist einfach, wenn Sie express.static(__dirname + 'public') verwenden, und vergessen Sie nicht, einen Schrägstrich vor der Öffentlichkeit zu setzen, der express.static(__dirname + '/public') ist, oder verwenden Sie express.static('public'). und ändern Sie nichts an CSS-Verknüpfungen. 

0
Dhananjaya