2016-05-06 10 views
0

Hier ist der Code für Express-Routing:CSS nicht aus Jade geladen, wenn sie von Express gemacht

var express = require('express') 
    bodyParser = require('body-parser'), 
    path = require('path'), 

var app = new express() 
app.use(bodyParser.json()) 

app.set('views', path.join(__dirname, 'views')) 
app.set('view engine', 'jade') 

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

app.get('/', function (req, res) { 
    res.render('index') 
}) 

Hier ist die Jade-Datei:

html 
    head 
     title 
     link(href='./simple-color-picker.css', rel='stylesheet') 

    body 
     block scripts 
      script(type='text/javascript' src='../public/bundle.js') 
     form(method="post",enctype="multipart/form-data",action="/") 
      p 
       input(type="text",name="title",placeholder="title") 
      p 
       input(type="file",name="upl") 
      p 
       input(type="submit") 

Wenn ich das index.html (gebaut von der Jade ziehen Datei) funktioniert es perfekt im Browser, aber beim Ausführen der Express-Datei bekomme ich 404 Fehler für das CSS und eine P5.js Datei in meinem Bundle.js. Ich denke, ich soll sie als statische Dateien dienen, aber das gibt mir die ERR_CONNECTION ABGELEHNT

Antwort

0

Sie falsche Route haben configs, dies:

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

app.get('/', function (req, res) { 
    res.render('index') 
}); 

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

app.get('/', function (req, res) { 
    res.render('index') 
}); 
+0

Vielen Dank! Das war die richtige Antwort. – Nohman

0

Ich gehe davon aus Sie Ihre CSS und JS-Dateien in den öffentlichen Ordner ablegen wie

--public

- -einfache-color-picker.css

--- bundle.js

dann

Änderung

link(href='./simple-color-picker.css', rel='stylesheet') 
script(type='text/javascript' src='../public/bundle.js') 

zu

link(href='/simple-color-picker.css', rel='stylesheet') 
script(type='text/javascript' src='/bundle.js') 
Verwandte Themen