reactjs - Css 样式不适用于 EXPRESS 和 EJS 的特定案例

Question

我将 express 与 ejs 一起用作模板语言。我面临一个关于我在单独目录中定义的 CSS 属性的应用问题。我已经使用 app.get() 函数定义了多个路由，但是在特定路由中，我的 css 属性没有被应用。我不知道实际发生了什么。如果我尝试在 chrome 的检查工具中查找。在控制台部分下没有错误甚至警告存在。如果我在网络选项卡下查看，我可以看到正在传输的 css 文件，但是在打开它之后，它似乎给了我另一个奇怪的 html 页面。

我将提供有关该特定路线的问题的所有信息。请在下面找到相关图片。

这是我正在使用的文件夹结构： 文件夹结构。一切都在“新”目录下

app.js 文件的内容：app.js 的 代码

home.js 文件的内容：home.js 的 代码

love.js 文件的内容：love.js 的 代码

posts.js 文件的内容：posts.js 的 代码

app.css 文件的内容： 应用于 body 的简单 css 属性

访问路线“/fallinlovewith/rusty”后，没有应用 css。但是在其他路线上，我的 CSS 运行良好。

路线中没有应用 css - '/fallinlovewith/rusty'

检查页面，我们可以看到 CSS 文件 app.css 已被使用。但如果我单独打开它，我会得到这个奇怪的东西，我不知道发生了什么。 双击网络选项卡下的app.css，我回到这个页面

顺便说一句，我正在关注我的讲师 Colt Steele，他在 udemy 上开设了这门课程，名为 web developer bootcamp。我按照他输入的方式跟踪了所有内容。尽管如此，我还是遇到了这个奇怪的问题。

标签： reactjsexpressejs

Answer 1

您的样式表必须以斜杠 ' /' 为前缀，以便引用网站的根...

我在你的代码中看到<link rel="stylesheet" href="app.css" />

它应该是<link rel="stylesheet" href="/app.css" />

如果您不使用斜线前缀，则 url 将附加到当前 url...

ps：下一次，复制代码而不是链接一些截图......这对读者来说会更容易......