Express.js 没有找到样式表答案

【问题标题】：Express.js not finding stylesheetExpress.js 没有找到样式表
【发布时间】：2016-07-30 08:48:34
【问题描述】：

我正在使用 MEAN 堆栈开发一个应用程序，但我无法让我的主索引页面获取我的样式表。运行 node server 工作正常，index.html 页面正在呈现，并且没有控制台错误。点击http://localhost:3000/public/css/app.css 会按预期返回 CSS。所以文件在那里并且可以访问，但是样式没有被应用到索引页面。

知道发生了什么吗？

./server.js

var config = require('./server/config/environment');
var express = require('./server/config/express');

var app = express();

app.listen(config.port, function() {
    console.log('Server is listening on port %d', config.port);
});

exports = module.exports = app;

./server/config/express.js

var express = require('express');
var path = require('path');

module.exports = function() {
    var app = express();

    app.set('view engine', 'ejs');
    require('../server.routes.js')(app);
    app.use("/public/css", express.static(path.resolve('public/css')));
    app.get('/public/css/app.css', function(request, response) {
        response.sendFile(path.resolve('public/css/app.css'));
    });

    return app;
};

./server/server.routes.js

module.exports = function(app) {
    app.get('/', require('./server.controller').render);
};

./server/server.controller.js

module.exports.render = function(request, response) {
    response.render('index');
};

./views/index.ejs

<head>
    <base href="/">
    <link rel="stylesheet" src="/public/css/app.css">
</head>

./public/css/app.css

body {
    margin: 70px 20px 20px 20px;
}

【问题讨论】：

您确定您的后端不提供 css 文件吗？试试background-color:red;.. 你是否在浏览器的 JS 控制台中看到错误？
将您的require('../server.routes.js')(app); 移动到静态文件处理程序下方。
尝试将背景颜色设置为红色——没有变化。我还尝试移动 require('../server.routes.js')(app);在静态文件处理程序下方，也没有运气（重新启动节点服务器后）。

标签： javascript html css node.js express

【解决方案1】：

试试这个

./views/index.ejs

<head>
    <base href="/">
    <link rel="stylesheet" href="/css/app.css">
</head>

./server/config/express.js

var express = require('express');
var path = require('path');

module.exports = function() {
    var app = express();

    app.set('view engine', 'ejs');
    require('../server.routes.js')(app);
    app.use(express.static(path.resolve(__dirname, 'public')));

    return app;
};

当您使用express.static() 时，您将其注册为公用文件夹，这意味着客户端实际上不需要知道该文件夹的名称。本质上你正在做的是调用

<head>
    <base href="/">
    <link rel="stylesheet" href="/public/css/public/css/app.css">
</head>

通常人们注册一个基本文件夹，然后将css放在css/子文件夹中，将js放在js/子文件夹中

编辑：@HydraHorn 自己意识到他使用的是<link src="..."> 而不是<link href="...">。也就是说，如果不更改 express.static()，它仍然无法工作。我已经进行了上述更改，以免混淆未来的访问者

【讨论】：

express.static 中间件必须在应用程序路由之前定义。
进行此更改后，我仍然遇到同样的问题，很遗憾。
当您加载索引页面时，在开发工具中查看网络是否出现 404 错误？
facepalm - 我需要将更改为。不过，我会接受这个答案，因为如果不更改 express.static 调用，它仍然会被破坏。
对不起，我应该注意到这一点。每个人都会不时犯这样的错误。感谢您接受我的回答。我为未来的访问者做了一些小的修改