静态CSS文件未应用于expressJS应用程序

时间:2015-06-16 15:12:43

标签: css node.js

我正在试用第一个快递网络应用程序,我正在使用html来渲染我的网页和CSS以设置我的页面样式。

我的目录结构如下

app.js
routes/
       index.js
views/
     index.html
public/
      stylesheets/
                  style.css

的index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Devices</title>
    <link ref="stylesheet" type="text/css" href="stylesheets/style.css">
</head>
<body>
    <h1>DEVICES</h1>
    <table>
        <tr><th>#</th><th>DID</th><th>DeviceName</th><th>OS</th><th>Version</th><th>Numbers</th></tr>
    </table>
</body>
</html>

我已使用链接标记链接静态CSS文件

app.js

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var routes = require('./routes/index');
var users = require('./routes/users');

var app = express();

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

// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(express.static(path.join(__dirname, 'styles')));

app.use('/', routes);
app.use('/users', users);

请注意app.set('view engine','jade');保留原样,好像我给html我收到错误。

index.js

var express = require('express');
var path = require('path');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {

  res.sendFile(path.resolve(__dirname , '../views/index.html'));
});

module.exports = router;

我的问题是放在public / stylesheets中的静态css文件在渲染时不会应用于我的html。当我执行http://localhost:3000/stylesheets/style.css时,我能够看到返回了style.css的内容。

我不太确定我做错了什么

由于

1 个答案:

答案 0 :(得分:0)

尝试更改设置静态资产路径的方式。

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