无法使用 Node Js App 在句柄栏模板中包含 CSS 样式答案

【问题标题】：Unable to include CSS styling in handleBar templates with Node Js App无法使用 Node Js App 在句柄栏模板中包含 CSS 样式
【发布时间】：2021-06-12 21:48:53
【问题描述】：

我有一个基于 Node Js-Express 的应用程序，并使用把手模板来设计 Nodemailer HTML 正文的结构。我尝试以多种方式包含 CSS 文件，但仍然没有任何样式应用于 HTML。

我目前的项目结构是这样的：

- backend
  - src
  - helpers
    - templates
      - emailTemplate.handlebars
  - public
    - styles.css
  - app.js

app.js 被定义为像这样使用把手：

const express = require('express');
const app = express();

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

车把模板如下所示：

<html>
<head>
    <title>Update Project Details</title>
    {{#each css}}
    <link rel="stylesheet" href="../../public/{{this}}">
    {{/each}}
</head>

<body>
    <h1>{{headerMessage}}</h1>
    <p>{{message}}</p>
    <p>
        {{bodyText}}
    <div class="row">
        <div class="side">
            <button class="edit"> Edit Details </button>
        </div>
        <div class="main">
            <button class="archive"> Archive Product </button>
        </div>
    </div>
</body>
</html>

当 nodemailer 运行和接收邮件时，HTML 内容从邮件正文内的 HandleBar 模板呈现，但没有任何 CSS 或样式。

我还尝试将 CSS 文件保存在与模板相同的文件夹中，但没有成功。不知道我哪里错了。任何解决相同问题的帮助将不胜感激。

【问题讨论】：

标签： html css node.js handlebars.js nodemailer

【解决方案1】：

我在这里看到的唯一问题是样式表与 DOM 的实际链接。如果您查看 app.js 中的 app.use，它会显示：

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

这意味着任何所谓的“公共”文件、图像、本地 js、样式都存储在公共文件夹中，这是所有标题的新相对路径。因此，无论您的 ejs 或 html 文件在哪里，样式表的相对路径总是从您的公用文件夹的顶层向下。这使它更具动态性，您唯一需要更改的是：

<link rel="stylesheet" href="../../public/{{this}}">

到：

<link rel="stylesheet" href="{{this}}">

就这么简单。希望这是有道理的，编码愉快！

【讨论】：

感谢您的解释。改了之后好像还是不行：/
@enthu_dev 嘿，试试<link rel="stylesheet" href="style.css"> 我不明白你所说的{{this}} 标签是什么意思，所以只需将其与本评论的第一部分一起清除即可。
还是不行。虽然我发现了一个奇怪的弯曲。我在浏览器中检查了电子邮件正文 HTML，似乎连 class="" 都从每个
或任何 HTML 标记中删除，忘记包括 CSS。不明白为什么会这样。在检查代码时至少应该有类名。
没问题，感谢您对此的调查。
嘿，你找到解决办法了吗？