无法使用 Node Js App 在句柄栏模板中包含 CSS 样式
Posted
技术标签:
【中文标题】无法使用 Node Js App 在句柄栏模板中包含 CSS 样式【英文标题】：Unable to include CSS styling in handleBar templates with Node Js App 【发布时间】：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 文件保存在与模板相同的文件夹中，但没有成功。不知道我哪里错了。任何解决相同问题的帮助将不胜感激。
【问题讨论】：
【参考方案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。不明白为什么会这样。在检查代码时至少应该有类名。
没问题，感谢您对此的调查。
嘿，你找到解决办法了吗？以上是关于无法使用 Node Js App 在句柄栏模板中包含 CSS 样式的主要内容，如果未能解决你的问题，请参考以下文章