Node.JS / EJS 的 CSS 问题答案

【问题标题】：CSS Issue with Node.JS / EJSNode.JS / EJS 的 CSS 问题
【发布时间】：2019-07-18 07:05:06
【问题描述】：

我知道以前有人问过类似的问题，但我仔细看了一遍，不幸的是，没有一个答案对我有帮助。

我的 CSS 文件在某些情况下被忽略了。

所以在我的 app.js 文件中有这段代码，定义了我的视图引擎设置

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

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

在我的 index.js 文件中，我有以下 UserList 页面的代码

/* GET Userlist page. */
router.get('/userlist', function(req, res) {
    var db = req.db;                               // (1) Extract the db object we passed to our HTTP request
    var collection = db.get('usercollection');    // (2) Tell our app which collection we want to use
                                                 // (3) Find (query) results are returned to the docs variable
    collection.find({},{},function(e,docs){
        res.render('userlist', { "userlist" : docs });    // (4) Render userlist by passing returend results to said variable
    });
});

最后，我的 userlist.ejs 页面如下所示：

<!DOCTYPE html>
<html>
  <head>
    <title>User List</title>
    <link rel='stylesheet' href='/stylesheets/style.css' type="text/css" />
  </head>
  <body>
    <h1>User List</h1>
    <ul>
      <%
        var list = '';
        for (i = 0; i < userlist.length; i++) {
          list += '<li><a href="mailto:' + userlist[i].email + '">' + userlist[i].username + '</a></li>';
        }
        return list;
      %>
    </ul>
  </body>
</html>

但是当我运行我的页面时，没有加载 CSS 文件。但是，如果我排除此代码：

<%
        var list = '';
        for (i = 0; i < userlist.length; i++) {
          list += '<li><a href="mailto:' + userlist[i].email + '">' + userlist[i].username + '</a></li>';
        }
        return list;
%>

加载和应用 CSS 文件没有问题。谁能告诉我这是为什么？为新手问题道歉，但我一直在努力解决这个问题。

我应该提到'h1'标签也被忽略了。唯一呈现的是列表项。

不确定它是否相关，但我的应用程序正在连接到 MongoDB 以返回用户数据。

非常感谢任何帮助！谢谢！

【问题讨论】：

您确定没有缓存旧的（无效的）引用吗？试试CTRL + SHIFT + R。
1.检查您的浏览器收到的 HTML 是否包含对您的 CSS 文件的引用。（CTRL+U查看源代码）。 2. 检查开发人员工具的网络选项卡是否包含对您的 CSS 的请求。（F12 打开开发者工具） 3. 查看开发者工具控制台是否给出了您的 CSS 未呈现的任何原因。（Esc 在开发者工具中切换控制台）。 ...有什么快乐吗？
不幸的是，绝对没有旧的无效引用。有趣的是，我的浏览器收到的 HTML 不包含对 CSS 文件的引用。它被完全忽略。我再次查看了我的代码，它看起来确实很完整。

标签： css node.js ejs

【解决方案1】：

确保您的 CSS 文件在 index.js 文件中定义为端点，或者确保 public/stylesheets/style.css 存在以便可以通过 app.use(express.static(path.join(__dirname, 'public'))); 命令加载。

【讨论】：