将样式表添加到 Express 应用程序

Question

对于我的网络应用程序，我在后端使用带有 express 和 parse.com 的 ejs。我在添加样式表时遇到问题，我能找到的这个问题的所有答案都没有解决我的问题。我想也许展示我的代码会有助于解决它。我的样式表目录是 public/css/style.css

请参阅下面来自 cloud/app.js

的代码

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

app.use(express.static(__dirname + '/public'));
app.set('views', 'cloud/views');  // Specify the folder to find templates
app.set('view engine', 'ejs');    // Set the template engine
app.use(express.bodyParser());    // Middleware for reading request body

var Movies = Parse.Object.extend('Movies');

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

    var query = new Parse.Query(Movies);
    query.find({

        success: function(results) {
            res.render('movie-list', { movies: results });
        },

        error: function(results, error) {

        }

    });
});


app.listen();

这是我的模板，位于视图中：

<html>
    <head>
        <title>Movies</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"    rel="stylesheet">
        <link href="css/style.css" type="text/css">
    </head>
    <body>
        <h1>Movies</h1>
        <ul id="categoryList" class="list-group">

            <%
                for (var i = 0; i < movies.length; i++)
                { 
                var movie = movies[i];
            %>

            <li class="list-group-item"><%= movie.get('Movie')%></li>

            <%
                }
            %>

        </ul>

    </body>
</html>

如有任何帮助，我们将不胜感激！谢谢！

Answer 1

我没有测试过您的代码，但查看我的 Parse 网络应用程序，我的样式表链接以 /

开头

尝试改变

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

至

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

祝你好运！

Answer 2

请在您的 app.js 中包含以下内容：

var path = require('path');
app.use('/css',express.static(path.join(__dirname, 'public/css')));

现在将您的 css 引用为：<link href="css/style.css" rel="stylesheet"> 它应该适合你。

但我认为了解 express 静态中间件以及为什么我告诉您要包含这些行很重要。

express.static 中间件负责为 Express 应用程序的静态资产提供服务。工作原理：

从 "public" 目录中的应用程序提供静态内容应用目录

// 获取 /style.css 等 app.use(express.static(__dirname + '/public'));
将中间件挂载在“/static”以仅在以下情况下提供静态内容他们的请求路径以“/static”为前缀

// GET /static/style.css 等

app.use('/static', express.static(__dirname + '/public'));
从多个目录提供静态文件，但优先 “./public”超过其他

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

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

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

所以这是您可以使用 express 静态中间件的三种不同方式。

Answer 3

让我回答我自己的问题。我删除了行

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

并按原样将 link 留给模板头部的样式表：

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

现在我的样式表可以正常工作了。

Answer 4

假设您使用 express 生成器 (npm install express-generator -g)，任何样式都必须添加到 /public/stylesheets/style.scss 文件

将样式表添加到 Express 应用程序

Add stylesheet to express app

javascript

ejs

express

parse-platform