将 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中文网其他相关文章!