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

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

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

并在模板的开头留下了样式表的链接：

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

现在我的样式表正在运作。

Answer 2

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

开头

尝试更改

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

到

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

祝你好运！

Answer 3

请在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.static中间件负责提供Express应用程序的静态资产。工作原理：

从＆＃34; public＆＃34;为该应用提供静态内容目录中申请目录

// GET /style.css等 app.use（express.static（__ dirname +＆＃39; / public＆＃39;））;
将中间件安装在＆＃34; / static＆＃34;仅在提供静态内容时他们的请求路径以＆＃34; / static＆＃34;
为前缀
// GET /static/style.css等。

app.use（＆＃39; / static＆＃39;，express.static（__ dirname +＆＃39; / public＆＃39;））;
提供来自多个目录的静态文件，但优先考虑＆＃34; ./公共＆＃34;超过其他人

app.use（express.static（__ dirname +＆＃39; / public＆＃39;））;

app.use（express.static（__ dirname +＆＃39; / files＆＃39;））;

app.use（express.static（__ dirname +＆＃39; / uploads＆＃39;））;

因此，这些是使用快速静态中间件的三种不同方式。

Answer 4

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

添加样式表来表达应用程序

4 个答案: