express-handlebars模板不在静态路由上加载CSS样式

express-handlebars是一个用于Node.js的模板引擎，它可以帮助开发者在服务器端生成HTML页面。它的主要特点是可以将数据动态地渲染到HTML模板中，从而实现页面的动态展示。

在使用express-handlebars时，如果要加载CSS样式，通常有两种方式：

内联样式：可以直接在HTML模板中使用<style>标签来定义CSS样式，将样式直接写在模板文件中。这种方式适用于样式比较简单且只在当前页面使用的情况。
外部样式表：可以将CSS样式定义在一个独立的CSS文件中，然后在HTML模板中使用<link>标签引入外部样式表。这种方式适用于样式比较复杂且多个页面共享的情况。

以下是一个示例代码，展示如何在express-handlebars模板中加载外部CSS样式：

在服务器端设置express-handlebars模板引擎：

const express = require('express');
const exphbs = require('express-handlebars');

const app = express();

app.engine('handlebars', exphbs());
app.set('view engine', 'handlebars');

创建一个包含CSS样式的外部样式表文件（例如styles.css），并将其放置在public目录下：

/* styles.css */

body {
  background-color: #f1f1f1;
}

h1 {
  color: #333;
}

在express应用中设置静态文件目录，使得public目录下的文件可以被访问：

app.use(express.static('public'));

创建一个路由处理程序，渲染包含外部CSS样式的模板：

app.get('/', (req, res) => {
  res.render('home', { css: 'styles.css' });
});

在模板文件（例如home.handlebars）中使用<link>标签引入外部样式表：

<!-- home.handlebars -->

<!DOCTYPE html>
<html>
<head>
  <title>Home</title>
  <link rel="stylesheet" href="{{css}}">
</head>
<body>
  <h1>Welcome to my website</h1>
</body>
</html>

在上述示例中，通过将CSS文件放置在public目录下，并使用express.static中间件将public目录设置为静态文件目录，使得CSS文件可以被访问。然后在路由处理程序中，将CSS文件名作为参数传递给模板引擎，模板引擎会将CSS文件名动态地插入到模板中，从而实现加载外部CSS样式。

腾讯云相关产品和产品介绍链接地址：