Search code examples
javahtmlcssspring-mvcthymeleaf

The .css file turns to become an HTML (thymeleaf) where it was embedded to

This is weird but it looks like Spring has just turned the bootstrap.css file into the thymeleaf .html template. Just take a look at the screenshot: bootstrap.css appears to have the contents of the .html now...

Can anyone explain me why this has happened and how to fix it? I have chacked and I'm sure that my bootstrap.css file is a normal Twitter-bootstrap CSS. The code of the panel.html template and Thymeleaf Java config are both below:

@Configuration
public class ThymeleafConfig extends WebMvcConfigurerAdapter {

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
    registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
}

@Bean
public MessageSource messageSource() {
    ReloadableResourceBundleMessageSource messageSource = new ReloadableResourceBundleMessageSource();
    messageSource.setBasename("views/localization");
    return messageSource;
}

@Bean
@Description("Thymeleaf template resolver serving HTML 5")
public ClassLoaderTemplateResolver templateResolver() {

    ClassLoaderTemplateResolver templateResolver = new ClassLoaderTemplateResolver();

    templateResolver.setPrefix("views/");
    templateResolver.setSuffix(".html");
    templateResolver.setTemplateMode("HTML");
    templateResolver.setCharacterEncoding("UTF-8");

    return templateResolver;
}

@Bean
@Description("Thymeleaf template engine with Spring integration")
public SpringTemplateEngine templateEngine() {
    SpringTemplateEngine templateEngine = new SpringTemplateEngine();
    templateEngine.addDialect(new Java8TimeDialect());
    templateEngine.setTemplateResolver(templateResolver());
    return templateEngine;
}

@Bean
@Description("Thymeleaf view resolver")
public ViewResolver viewResolver() {

    ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();

    viewResolver.setTemplateEngine(templateEngine());
    viewResolver.setCharacterEncoding("UTF-8");
    viewResolver.setOrder(1);

    return viewResolver;
}

@Override
public void addViewControllers(ViewControllerRegistry registry) {
    registry.addViewController("*").setViewName("panel");
    registry.setOrder(0);
}

And the template: 

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>HBase listener</title>
    <link rel="stylesheet" th:href="@{//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css}" />
    <link rel="stylesheet" th:href="@{static/css/bootstrap.css}" media="all"/>
    <link rel="shortcut icon" th:href="@{img/ico.png}"/>

</head>
<body>
<div class="jumbotron text-center">
    <h1 data-th-text="#{welcome.message}">Welcome</h1>
    <p>Today is: <span data-th-text="${#dates.format(standardDate, 'HH:mm dd-MM-yyyy')}">*_*</span></p>
</div>
<div class="container">
    <div class="row">
        <div class="col-sm-4">
            <h3>555kjvd</h3>
            <p>Presved</p>
        </div>
        <div class="col-sm-4">
            <h3>Preved</h3>
            <p>Preved</p>
        </div>
        <div class="col-sm-4">
            <h3>Preved</h3>
            <p>Preved</p>
        </div>
    </div>
</div>
<div>
</div>
</body>
</html>

And the folder structure: spring-boot app folder structure

Solution

  • The problem actually was solved by setting the "path" instead of the "name" parameter to controller's @RequestMapping. The answer is here: Springboot - Resource interpreted as Stylesheet but transferred with MIME type text/htm