CSS文件加载为HTML [关闭]答案

【问题标题】：CSS file loading as HTML [closed]CSS文件加载为HTML [关闭]
【发布时间】：2022-01-16 01:07:45
【问题描述】：

我刚刚遇到了一个奇怪的问题。我目前正在使用 Spring Boot 开发一个 Java 项目。

我的 CSS 文件位于 resources/static/css 下，我的 HTML 文件位于 resources/templates 下。我曾经有过这种映射：localhost:8080/races。在那一刻一切都很好。然后我觉得在localhost:8080/admin 下拥有这些管理页面会更好。所以我进行了更改，现在我的 CSS 文件加载为templates/breeds.html，它对应于localhost:8080/admin/races 下的 HTML。这是问题的截图，我们可以看到 CSS 加载良好并被识别为 CSS 文件，但响应是......不同。任何帮助表示赞赏！

这是我项目的前端结构。

我的css文件链接：

<link type="text/css" rel="stylesheet" href="/css/breeds.css">

我也试过了，但结果一样：

<link type="text/css" rel="stylesheet" href="../css/breeds.css">

编辑：这是我的项目完整结构：

.idea
.mvn
.src
│   main
│     └───java
│           └───com
│                 └───example
│                        └───pomskygen2
│                                 └───controllers
│                                         BreedController.java
│                                 └───models
│                                         Breed.java
│                                 └───repositories
│                                         BreedRepository.java
│                                 └───services
│                                         BreedService.java
│                                 Pomskygen2Application.java
│                                 SecurityConfig.java
│     └───resources
│             └───static
│                   └───css
│                           breeds.css
│             └───templates
│                   └───admin
│                           breeds.html
│                           breed-edit.html
│             application.properties
│   test  
│
└───target

这是我在浏览器中显示页面源代码时看到的内容：

编辑 2：在我的 HTML 头标签中添加了一个基本标签：

<head>
   <meta charset="UTF-8">
   <title>Races</title>
   <base href="http://localhost:8080/">
   <link type="text/css" rel="stylesheet" href="css/breeds.css">
</head>

已找到但仍显示breeds.html而不是breeds.css。

【问题讨论】：

你能分享你的实际代码吗？我假设您的 css 文件的导入路径是错误的或者是相对路径
@MarcRo 抱歉，我刚刚通过电话编辑了我的帖子
您的两个屏幕截图中的文件路径肯定根本不适合。在一个文件夹名称是“css”，在另一个文件夹名称是“static.css”你应该澄清你的问题。
这是 IntelliJ 的显示方式。静态文件在根 url 上提供，static.css 表示 IntelliJ 的 static/css
@Sebriniel 在您的第一个屏幕截图中，您在 VS 代码中打开了berries.css 文件，但实际上您在 CSS 文件中编写了 HTML。请确认这一点，如果可能，请分享实际代码。谢谢

标签： html css

【解决方案1】：

如果您的项目在网络上，只需使用 url

<link rel="stylesheet" href="xyz.com/static/CSS/breeds.css">

或

<link rel="stylesheet" href="../../static/CSS/breeds.css">

【讨论】：

【解决方案2】：

我会使用基本标签。因此，您可以简单地定义整个应用程序的起始路径。因此： css/file.css" + baseUrl = baseUrl/css/file.css.

<head>
...
<base href="http://yourSite.tld/">
</head>

【讨论】：

我认为这就是答案。我在我的文件中添加了基础，但现在找到了文件，但仍然显示breeds.html而不是breeds.css。
@Sebriniel 嗨！ :-) 你可以附加反斜杠并再试一次吗？ <base href="localhost:8080/">
@Sebriniel 你试过了吗？并删除了浏览器缓存？
@Sebriniel 这是一个奇怪的错误。也许你应该将breeds.css 重命名为stylebreeds.css 看看行为是否改变？
我刚刚尝试从<base href="localhost:8080/"> 文件中删除反斜杠仍然找到但仍然是html。

【解决方案3】：

感谢文件结构，我理解得更好了。请添加您的链接标签如下

<link rel="stylesheet" href="../../static/CSS/breeds.css">

请记住，您必须返回两个文件夹，因为 breeds.html 位于 admin 中，另外，请确保您的大小写正确，就像在 /CSS/ 中一样

【讨论】：

这个语法返回localhost:8080/admin/css/breeds.css，而我的css文件应该在localhost:8080/css/breeds.css。也许我应该尝试将我的 css 文件放入 static/admin/css 文件夹？另外，我不明白，你需要完整的 html 和完整的 css 吗？我在一个在线验证工具上进行了css检查，真的很简单，我认为不会有错误
不是所有文件，只是文件结构...还有，如果你在浏览器中查看源代码会发生什么
完成。我只放了相关文件，但你有所有的文件夹和包。
谢谢，请尝试更新的答案，如果可行，请告诉我
对不起，我今天早上刚起床的时候写下结构，文件夹是css而不是css。我已经编辑过了。我用 css 尝试了你的答案，它返回 http://localhost:8080/static/css/breeds.css 和 404 错误。我读到了一些关于在根 url 上提供 Spring Boot 静态文件夹的内容......这就是为什么我尝试了我在帖子中写的路径。这对你有意义吗？