Question

我在将css文件连接到我的ejs文件时遇到问题。我想我有标准的node.js / express设置。我尝试将位于我的public / css目录中的 main.css 文件连接到位于我的视图中的 index.ejs 文件。 HTML和路由工作正常。这是我的 app.js 代码。

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var index = require('./routes/index');
var users = require('./routes/users');
var contact = require('./routes/contact');
var register_form = require('./routes/register');


var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

在我的index.ejs文件中，我已在头标记之间插入了链接。我已经三重检查以确保所有文件名都正确无误。

 <head>
    <title><%= title %></title>
    <link type="text/css" rel='stylesheet' href='../public/css/main.css' />
  </head>

Answer 1

在app.js中，您已使用：app.use(express.static(path.join(__dirname, 'public')));定义了静态文件的位置（如您所愿）。这允许您从public目录开始引用具有绝对路径的静态文件，例如css。

所以将链接线更改为 <link type="text/css" rel='stylesheet' href='/css/main.css' />它应该有效。

最好使用这种“绝对”路径，因为它允许您在不破坏CSS链接的情况下移动模板页面（例如移动views/index.ejs -> views/pages/index.ejs

为什么我不能将我的CSS链接到我的ejs文件？

1 个答案: