Question

我正在使用MEAN堆栈处理应用程序，而我无法让我的主索引页面获取样式表。运行节点服务器工作正常，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;

./服务器/配置/ 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.routes.js

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

./服务器/ server.controller.js

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

./视图/ index.ejs

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

./公共/ CSS / app.css

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

Answer 1

试试这个

./视图/ index.ejs

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

./服务器/配置/ 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.js找不到样式表

1 个答案: