如何在 Node、Express 和 EJS 应用程序中正确加载 CSS 样式表？

将 CSS 嵌入 Node、Express 和 EJS 应用程序

许多开发人员很难将 CSS 样式表加载到使用 Node、Express 构建的 Web 应用程序中和 EJS。本文针对此常见问题提供了全面的解决方案。

问题陈述：

尽管遵循了文档说明，但用户在加载 CSS 文件时仍然遇到困难。 styles.css 文件仍然无法访问，并且开发者工具指示该元素的类型设置为“text/html”而不是“text/css”。

解决方案：

要解决此问题，请将 app.js 文件中的express.static 中间件修改为以下内容：

<code class="javascript">app.use(express.static(__dirname + '/public'));</code>

这可确保静态文件从应用程序根目录的公共目录提供

EJS 中的 CSS 包含：

配置中间件后，您可以将 CSS 文件包含在 EJS 模板中，如下所示：

<code class="ejs"><link rel="stylesheet" type="text/css" href="css/style.css"></code>

请注意，CSS 文件名前不应包含前导斜杠 (/)。这对于浏览器正确识别和加载样式表至关重要。

通过实施这些更改，您可以将 CSS 样式表无缝合并到 Node、Express 和 EJS 应用程序中。

以上是如何在 Node、Express 和 EJS 应用程序中正确加载 CSS 样式表？的详细内容。更多信息请关注PHP中文网其他相关文章！