添加样式表以表达应用程序
[英]Add stylesheet to express app
问题描述
For my web app I am using ejs with express and parse.com on the backend. 
对于我的Web应用程序，我在后端使用带有express和parse.com的ejs。 I am having an issue with adding stylesheet and all the answers to this question I was able to find are not solving my problem. 我在添加样式表时遇到问题，而我能够找到的该问题的所有答案都无法解决我的问题。 I thought maybe showing my code would help to solve it. 我认为也许显示我的代码将有助于解决它。 My stylesheet directory is public/css/style.css 我的样式表目录是public / css / style.css
See below the code from cloud/app.js 参见下面来自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();
And here is my template, located in the views: 这是我的模板，位于视图中：
<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>
Any help would be greatly appreciated! 任何帮助将不胜感激！ Thank you! 谢谢！
4 个解决方案
解决方案1
4 2015-04-14 17:23:19
Let me answer my own question. 让我回答我自己的问题。 I deleted the line 我删除了这一行
app.use(express.static(__dirname + '/public'));
and left link to stylesheet in the head of my template as it is: 并保持链接到模板头中的样式表，如下所示：
<link href="/css/style.css" type="text/css">
Now my stylesheet is working. 现在我的样式表正在工作。
解决方案2
2 已采纳 2015-04-14 05:33:31
I haven't tested your code, but looking at my Parse web apps, my links to stylesheets start with / 我尚未测试您的代码，但在查看我的Parse网络应用程序时，指向样式表的链接以/开头
Try changing 尝试改变
<link href="css/style.css" type="text/css">
to 至
<link href="/css/style.css" type="text/css">
Good luck! 祝好运！
解决方案3
1 2015-04-14 06:24:09
Please include following in your app.js: 请在您的app.js中添加以下内容：
var path = require('path');
app.use('/css',express.static(path.join(__dirname, 'public/css')));
Now reference your css as : <link href="css/style.css" rel="stylesheet"> It should work for you. 现在，将您的CSS引用为： <link href="css/style.css" rel="stylesheet">它应该对您<link href="css/style.css" rel="stylesheet"> 。
But i think it's important to understand about express static middleware and why i am telling you to include those lines. 但是我认为重要的是要了解静态静态中间件以及为什么要告诉您包括这些行。
express.static middleware is responsible for serving the static assets of an Express application. express.static中间件负责服务Express应用程序的静态资产。 How it works: 这个怎么运作：
Serve static content for the app from the "public" directory in the application directory
从应用程序目录中的“公共”目录为应用程序提供静态内容 // GET /style.css etc app.use(express.static(__dirname + '/public'));
// GET /style.css等app.use（express.static（__ dirname +'/ public'））; Mount the middleware at "/static" to serve static content only when their request path is prefixed with "/static"
仅在中间件的请求路径带有“ / static”前缀时，才将中间件安装在“ / static”上以提供静态内容 // GET /static/style.css etc.
// GET /static/style.css等 app.use('/static', express.static(__dirname + '/public'));
app.use（'/ static'，express.static（__ dirname +'/ public'））; Serve static files from multiple directories, but give precedence to "./public" over the others
提供来自多个目录的静态文件，但将“ ./public”优先于其他目录 app.use(express.static(__dirname + '/public'));
app.use（express.static（__ dirname +'/ public'））; app.use(express.static(__dirname + '/files'));
app.use（express.static（__ dirname +'/ files'））; app.use(express.static(__dirname + '/uploads'));
app.use（express.static（__ dirname +'/ uploads'））;
So these are three different ways you can use express static middleware. 因此，这是使用静态静态中间件的三种不同方式。
解决方案4
1 2018-05-09 22:31:05
假设您使用express生成器（npm install express-generator -g），则必须将任何样式添加到/public/stylesheets/style.scss文件中
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.