html - 当我使用 Thymeleaf 运行我的 Spring Boot 元素时,浏览器不会加载 css 文件,而是加载 href 和 th :href is correct 的路径

标签 html css spring thymeleaf

所以我阅读了很多关于我的问题的文章和话题,比如这些:

Refused to apply style because its MIME type ('application/json') is not a supported

https://github.com/froala/angular-froala/issues/170

但没有一个答案能真正帮助我,所以我在问我自己的问题。

目前情况是:

我有一个使用 thymeleaf 的 Spring Boot 元素,我在 resources/templates 下有一个 html 文件,我在 ressources/templates/css 下也有一个 css。

结构如下:

  • 来源
    • 主要
      • 资源
        • 静态的
          • CSS
            • “我的CSS文件”
        • 模板
          • “我的 html 文件”

这是我的 html 文件:

<!DOCTYPE html>
<html lang="de" xmlns:th="http://www.thymeleaf.org">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Welcome to Mreza Mladih</title>
        <link rel="stylesheet" type="text/css" href="../static/css/styles.css" th:href="@{../static/css/styles.css}">
        <link href="https://fonts.googleapis.com/css2?family=Lato&family=Raleway&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap" rel="stylesheet">
    </head>

并且运行元素后,google chrome 不会加载 css 文件:

Refused to apply style from...

此外:

@Configuration
@EnableWebSecurity
public class SecurityConfiguration extends WebSecurityConfigurerAdapter  {    
@Override
        protected void configure(HttpSecurity http) throws Exception {
            http.authorizeRequests().antMatchers(
                    "/registration**",
                    "/js/**",
                    "/static/css/**",
                    "/static/img/**").permitAll()
                    .anyRequest().authenticated()
                    .and()
                    .formLogin()
                    .loginPage("/")
                    .permitAll()
                    .and()
                    .logout()
                    .invalidateHttpSession(true)
                    .clearAuthentication(true)
                    .logoutRequestMatcher(new AntPathRequestMatcher("/logout"))
                    .logoutSuccessUrl("/login?logout")
                    .permitAll();
        }
}

有趣的是,我的 CSS 实际上是正确的,而且可以正常工作! 我使用 intellij,IDE 有一个 html 文件的预览功能,它确实有效。

如果有人能提供帮助并感谢您,那就太好了!

来自德国的问候

最佳答案

Spring Boot 为应用程序根目录下 src/main/resources/static 中的任何内容提供服务。

因此使用 Thymeleaf 获取 CSS 的 URL 应该是 /css/styles.css

像这样编辑您的 HTML 文件:

<link rel="stylesheet" type="text/css" href="../static/css/styles.css" th:href="@{/css/styles.css}">

在您的安全配置中,也使用 /css 而不是 /static/css:

.antMatchers(
                    "/registration**",
                    "/js/**",
                    "/css/**",
                    "/img/**").permitAll()

您还可以使用:

http.authorizeRequests()
    .requestMatchers(PathRequest.toStaticResources().atCommonLocations())
         .permitAll()
    .antMatchers("/registration**",
                 "/img/**")
        .permitAll()

PathRequest.toStaticResources().atCommonLocations()包括/css/*, /js/*, /images/*/webjars/*favicon.ico

关于html - 当我使用 Thymeleaf 运行我的 Spring Boot 元素时,浏览器不会加载 css 文件,而是加载 href 和 th :href is correct 的路径,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64501310/

相关文章:

java - Spring框架中的容器是什么?

php - 使用 html2fpdf 时不显示图像

html - 是否有可能模仿 CSS 中的滑动门技术以具有没有图像的按钮

html - CSS box-shadow 在 IE 或 Safari 上不工作

css - 根据其他规则应用 CSS 规则 - RTL 特定样式

html - 一切都散布在我的网站上

html - 与 IE9 相比,Firefox 似乎在大多数元素的顶部添加了 3px

html - 为什么我的第二排被放置在两个相对的花车之间

java - SLF4JLoggerContext 无法转换为 LoggerContext

java - 依赖于 bootRun 的 Gradle 任务