Html 无法使用Node Js App在把手模板中包含CSS样式_Html_Css_Node.js_Handlebars.js_Nodemailer

Html 无法使用Node Js App在把手模板中包含CSS样式

html css node.js

Html 无法使用Node Js App在把手模板中包含CSS样式,html,css,node.js,handlebars.js,nodemailer,Html,Css,Node.js,Handlebars.js,Nodemailer,我有一个基于Node Js Express的应用程序，并使用Handlebar模板为NodeEmailer HTML正文设计了一个结构。我尝试了多种方法来包含CSS文件，但仍然没有一种样式被应用到HTML中我当前的项目结构如下： - backend - src - helpers - templates - emailTemplate.handlebars - public - styles.css - app.js const express =

我有一个基于Node Js Express的应用程序，并使用Handlebar模板为NodeEmailer HTML正文设计了一个结构。我尝试了多种方法来包含CSS文件，但仍然没有一种样式被应用到HTML中

我当前的项目结构如下：

- backend
  - src
  - helpers
    - templates
      - emailTemplate.handlebars
  - public
    - styles.css
  - 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>

app.js定义为使用如下手柄：

- backend
  - src
  - helpers
    - templates
      - emailTemplate.handlebars
  - public
    - styles.css
  - 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>

把手模板如下所示：

- backend - src - helpers - templates - emailTemplate.handlebars - public - styles.css - 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>

更新项目详细信息 {{{#每个css} {{/每个}} {{headerMessage}} {{message}} {{bodyText}} 编辑详细信息档案产品
当nodeEmailer运行并接收邮件时，HTML内容将从邮件正文中的HandleBar模板呈现，但没有任何CSS或样式

我还尝试将CSS文件保存在与模板相同的文件夹中，但没有成功。我不知道我会错在哪里。我们将非常感谢您提供的任何帮助。
我在这里看到的唯一问题是样式表与DOM的实际链接。如果您查看
应用程序，请在app.js中使用，其中显示： app.use(express.static(path.join(__dirname, '/public'))); 这意味着任何所谓的“公共”文件、图像、本地js、样式都存储在公共文件夹中，这是所有标题的新相对路径。因此，无论您的ejs或html文件位于何处，样式表的相对路径始终是从公用文件夹的顶层向下。这使它更具活力，您唯一需要改变的是： <link rel="stylesheet" href="../../public/{{this}}"> 致：就这么简单。希望这是有意义的，快乐的编码谢谢你的解释。更改后，它似乎仍然不起作用：/@enthu_dev嘿，试试做我不知道你所说的{{this}} 标记是什么意思，所以只需将它与此注释中的第一部分对齐即可。仍然不起作用。虽然我发现了一个奇怪的弯曲。我在浏览器中检查了电子邮件正文HTML，似乎连class=”“都从每个或任何HTML标记中删除了，忘了包括CSS。不明白为什么会这样。至少在检查代码时类名应该在那里。嗯，奇怪。对不起，我不能帮你解决这个问题。没问题，谢谢你调查此事。