NodeJS和Express：CSS not loading

我已經創建了自己的服務器和路由器文件來爲我的html頁面提供服務。頁面呈現，但我的問題是，它呈現沒有CSS樣式。NodeJS和Express：CSS not loading

我使用express.static服務我的/公共文件，理論上這應該服務於css文件 - 或者我想。我已經對我的問題進行了Google搜索，並查看了前幾頁的鏈接，但仍無法解決我的問題。任何人都可以體會我的錯

我的目錄是：

的NodeJS
- node_modules
- 公共
  - CSS
    - 的style.css
  - JS
- 路由器
  - main.js
- 意見
  - 我的HTML文件

我的服務器代碼是：

var express = require('express'); 
var app = express(); 
var fs = require('fs'); 
var url = require('url'); 
var path = require('path'); 
var http = require('http'); 
var router = express.Router(); 

var bodyParser = require('body-parser'); 
app.use(bodyParser()); 

app.use(express.static(__dirname + "/public", {maxAge: 3456700000})); 
require('./router/main')(app); 
app.engine('html', require('ejs').renderFile); 
app.set('views', __dirname + '/views'); 
app.set('view engine', 'ejs'); 

var server = app.listen(3000, function() { 

    var host = server.address().address 
    var port = server.address().port 

    console.log('Example app listening at http://%s:%s', host, port); 

});

我的路由器的代碼是：

var url = require('url'); 

module.exports = function (app) { 

    app.get('/', function (req, res) { 
     res.render('../views/default.html'); 
     console.log("Home page displayed"); 
    }); 

// Some more get requests for different pages 

};

我的HTML代碼是：

<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 
<title>Index</title> 
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
<link rel="stylesheet" type="text/css" href="/css/style.css">  
</head>

固定[錯誤：代碼所需重新安排和鉻瀏覽器需要更新NG到最新版本]

來源

2015-02-24 hturner

放置其他路線之前的靜態路由（右bodyParser後） – adeneo 2015-02-24 10:57:02

@adeneo感謝回覆。我已經改變了這一點，但仍然沒有正確顯示。 – hturner 2015-02-24 11:00:44

然後你將它移動到'/ router/main'行之上？ – adeneo 2015-02-24 11:07:52

CSS的路徑看起來錯了，它應該是/css/style.css而不是portalstyle.css，這樣

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

來源

2015-02-24 10:47:34

感謝您的快速回復。我沒有注意到這一點，但現在已經改變了它，我仍然有同樣的問題 - 代碼也更新，包括這個 – hturner 2015-02-24 10:50:25

好吧，它仍然是'portalstyle.css'而不是'style.css'，你能告訴什麼是你得到這個CSS請求錯誤（404或其他）。並且在快遞日誌中也有任何錯誤。使用morgan模塊進行快遞或其他工作來打印您的請求日誌 – 2015-02-24 10:55:57

NodeJS和Express：CSS not loading

回答

相關問題