无法使用 Node Js 应用程序在 handleBar 模板中包含 CSS 样式

问题描述 投票:0回答:2

我有一个基于 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
2个回答
0
投票

我在这里看到的唯一问题是样式表与 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}}">

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


0
投票

我使用内部风格。我将CSS代码放在它起作用的头部部分。

© www.soinside.com 2019 - 2024. All rights reserved.