首页 > web前端 > css教程 > 正文

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

Patricia Arquette
发布: 2024-10-26 02:09:02
原创
561 人浏览过

How to Properly Load CSS Stylesheets in Node, Express, and EJS Applications?

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

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板