0

I am really confused about how to approach the resolution for this bug. There are many supposed solutions for different situations that don't seem to apply to me directly. And hopefully, as I find answers to this question, I can comprehend what exactly is going on here. Please note I'm using Spring Boot for this Project

Problem

I have successfully implemented Sass into my project and it appears to be working correctly. I can designate the source and target folders in my pom.xml. However, whenever I attempt to reference the CSS file in my HTML file, I am unsuccessful. The error I am seeing in Chrome Dev Tools is this:

Refused to apply style from 'http://localhost:8080/css/main.css' because its MIME type ('application/json') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

This is the result of my searching:

  • Stylesheet not loaded because of MIME-type Q #1 I initially searched up the specific error and received this StackOverflow post. The linked answer states that he believed that the problem was related to a CSS library starting with comments. I believe he thinks because of some comments, the MIME-type had changed. So I attempted to remove all comments in my final css file. Once again, no luck.
  • Stylesheet not loaded because of MIME-type Q #2 Another lower answer on the same post states that the error can come up when you're not referring to your CSS file properly. I believe this is likely the case, but I don't completely understand how my setup of spring-boot is handling the static files, or if it is not doing so at all because of lack of configuration.
  • Stylesheet not loaded because of MIME-type Q#3 This answer further solidifies the case that my CSS file path is wrong, and that it's returning "status: 404 with some Not Found content payload of HTML type". And because of this, it makes sense why it would return a MIME-type exception.
  • MIME type ('text/html') is not a supported stylesheet MIME type This question seemed to be aimed at something unrelated to Spring-Boot, so I concluded that it wouldn't be very helpful to me.

After not being successful with resolutions to the MIME-type exception, I realized perhaps I didn't completely understand how resources were made public in a Spring-Boot environment, so I searched for information about this:

Most of the answers to these questions required @EnableWebMVC to be disabled to allow the auto-configuration of Spring-Boot. However, the tutorial I'd been following had used @EnableWebMVC and I didn't want to try and approach the more complex method of configuring a WebSecurityConfigurer, especially since I still don't understand how to do the basic approach.

My next theory was that Spring Boot Security may be restricting access to the css files.

File Structure

File Structure

Source Code

You can find all of the relevant code here in the repository: https://github.com/CloakingOcean/CampaignChronicle

Thank you for anyone taking the time to assist me! I really want to progress forward in spring development, and with help from all of you, I just might!

Community
  • 1
  • 1
Shawn Whitaker
  • 5
  • 2
  • Voted to close (but did not downvote) because code needs to be in this question itself. In this case, what we need to see from you is any Boot properties or configuration that relates to "resources" or "resolvers", or any controller you have that's handling this path. – chrylis -cautiouslyoptimistic- Apr 07 '20 at 20:11

1 Answers1

0

Ah, I've figured out my mistake. My project is depending on Thymeleaf 

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

Thus, it's expecting thyme leaf related configuration for the spring boot public assets.

This post: Thymeleaf + CSS+SpringBoot, shows how to use Thymeleaf to set up the default Thymeleaf structure, and how to link the files in an HTML document. However, unfortunately, I did need to disable @EnableWebMVC. I will have to discover what major changes in my project are a result of this.

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

Shawn Whitaker
  • 5
  • 2