为什么我不能将我的 css 链接到我的 ejs 文件？答案

【问题标题】：Why can't I link my css to my ejs files?为什么我不能将我的 css 链接到我的 ejs 文件？
【发布时间】：2017-11-22 08:24:27
【问题描述】：

我在将我的 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 标签之间插入了链接。我已经三重检查以确保所有文件名都正确。

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

【问题讨论】：

标签： html css node.js express ejs

【解决方案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

【讨论】：