javascript - Node.js 未定义的 CSS 文件

标签 javascript html css node.js eclipse

我刚刚创建了一个默认的 Node.js Express 元素。 index.ejs 文件给我错误:

未定义的 CSS 文件('/stylesheets/style.css')。

这是 index.ejs:

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
  </body>
</html>

这是我认为来自 app.js 文件的相关代码:

var express = require('express')
  , routes = require('./routes')
  , user = require('./routes/user')
  , http = require('http')
  , path = require('path');

var app = express();

// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));

目录结构如下:

enter image description here

据我了解,app.use(express.static(path.join(__dirname, 'public')));应该允许我引用相关目录 <link rel='stylesheet' href='/stylesheets/style.css' /> ,但我仍然收到未定义的 css 错误。怎么了?

编辑:这是我当前的配置:

应用程序.js

/**
 * Module dependencies.
 */

var express = require('express')
  , routes = require('./routes')
  , user = require('./routes/user')
  , http = require('http')
  , path = require('path');

var app = express();

// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('public', __dirname + '/public');
app.set('view engine', 'ejs');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static('public'));

// development only
if ('development' == app.get('env')) { // jshint ignore:line
  app.use(express.errorHandler());
}

app.get('/', routes.index);
app.get('/users', user.list);
app.get('/', function(req, res){ res.render('index.ejs'); });

http.createServer(app).listen(app.get('port'), function(){
  console.log('Express server listening on port ' + app.get('port'));
});

index.ejs:

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
  </body>
</html>

最佳答案

尝试

app.use(express.static(path.join(__dirname, '/public')));

app.use(express.static('public'));

express 文件here

编辑 1:

你有一个额外的'/'

<link rel='stylesheet' href='stylesheets/style.css' />

关于javascript - Node.js 未定义的 CSS 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36296087/

相关文章:

JavaScript 四舍五入得到小数点后第二位 0

javascript - 如何使用输入字段名称 ="array[]"jQuery ajax?

javascript - jquery p :last-child not working

javascript - 在鼠标悬停时更改 div 背景图像并单击单独的位置

CSS:使一个中央 div 的高度扩展以填充 FIXED-HEIGHT 容器中剩余的内容

javascript - 网页中的半透明div

javascript - 碰撞适用于顶部,但不适用于底部

php - 使用jquery修改服务器端函数

javascript - 如何将html正文表格导出到Excel?

jquery - 定位来自 jQuery 验证插件的消息