CSS não funciona com Spring (Sem SpringSecurity!)

Tenho um projeto Spring + Thymeleaf e basicamente meus arquivos estáticos não funcionam. Está tudo perfeito, e simplesmente não aplica o CSS na página. Já me certifiquei de:

  • Verificar se esta linkando corretamente: Ao exibir código fonte, consigo acessar o css. Já tentei referenciar com o th:ref="@{}", com href.
  • Permissões do Spring Security: Já tentei diversas coisas, nada funcionou. Então comentei toda parte de security e deixei o projeto limpo, ainda não funciona.
  • Caminho dos arquivos: Todos dentro de resources/static/css

Já testei:

  • Fazer uma cópia de testes do projeto: Fui comentando parte por parte do código afim de caçar algum conflito, sem sucesso.

Bootstrap funcionando normalmente.

Não sei mais o que fazer. Já pesquisei em tudo, todas as perguntas semelhantes não tem resposta. Eu devo estar fazendo alguma burrisse muito grande e não estou percebendo devido ao estresse. Se puderem dar uma olhada no meu código, vou deixa-lo abaixo, e também o repositório no github caso alguém queira verificar mais afundo.

<!DOCTYPE html>
<html xmlns:th="http://thymeleaf.org">
<head>


<meta charset="UTF-8">
<title>MyReview</title>
<!--Simple Rating-->
<link rel="stylesheet" type="text/css" th:href="@{/css/simplerating.css}" media="screen" />
<!--Circle Buttons-->
<link rel="stylesheet" type="text/css" href="css/circlebuttons.css" media="screen" />
<!--Bootstrap CSS-->
<link rel="stylesheet" href="/webjars/bootstrap/css/bootstrap.min.css">
<!--RateYo-->
<link rel="stylesheet" href="css/jquery.rateyo.css" media="screen" />
<!--Font Awesome CSS-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


</head>
<body>


<!--NavBar -->
	<nav class="navbar navbar-dark" style="background-color: #a31717;">
		<a class="navbar-brand" style="color: white;">MyReview</a>
		<form class="form-inline">
			<input class="form-control mr-sm-2" type="search"
				placeholder="Search" aria-label="Search">
			<button class="btn btn-outline-warning my-2 my-sm-0" type="submit">Search</button>
		</form>
	</nav>
	
	
	
	<div class="row">
	
	<!--SideOptions -->
		<div class="col-sm-2">
			<div class="row">
				<div class="col-sm-3"></div>
				<div class="col-sm-6">
					<br /> <br /> <br />
					<button class="btn btn-warning btn-circle btn-circle-xl m-1">
						<i class="fa fa-tags"></i>
					</button>
				</div>
			</div>
			<div class="col-sm-3"></div>
			<div class="row">
				<div class="col-sm-3"></div>
				<div class="col-sm-6">
					<p>Santa Catarina</p>
					<p>São José</p>
					<p>Forquilhas</p>
					<div id="rateYo"></div>
					<h5 id="teste">Alo</h5>
				</div>
				<div class="col-sm-3"></div>
			</div>
			<div class="row"></div>
		</div>
		
		
	<!--Content -->
		<div class="col-sm-9">
			<form method="GET">
				<div class="list-group" th:each="establishment : ${establishments}">
					<a href="#" class="list-group-item list-group-item-action">
						<div class="d-flex w-100 justify-content-between">
							<h5 class="mb-1" th:text="${establishment.name}"></h5>
							<small></small>
						</div>
						<p class="mb-1" th:text="${establishment.description}"></p> 
						<small>
							<span id="note1" class="fa fa-star"></span>
							<span id="note2" class="fa fa-star"></span>
							<span id="note3" class="fa fa-star"></span>
							<span id="note4" class="fa fa-star"></span>
							<span id="note5" class="fa fa-star"></span>
						</small>
					</a>
					<script>
						  	var note = [[${establishment.stars}]];
						  	switch(note) {
						  case 1:
						    $("#note1").addClass("checked");
						    break;
						  case 2:
						    $("#note1, #note2").addClass("checked");
						    break;
						  case 3:
						    $("#note1, #note2, #note3").addClass("checked");
						    break;
						  case 4:
						    $("#note1, #note2, #note3, #note4").addClass("checked");
						    break;
						  case 5:
						    $("#note1, #note2, #note3, #note4, #note5").addClass("checked");
						    break;
						  default:
								}
  					</script>
				</div>
			</form>
		</div>
		
		
		
		
	</div>

	<!--RateYo JS -->
	<script src="js/jquery.rateyo.js"></script>
	<!--jQuery -->
	<script src="/webjars/jquery/3.4.1/jquery.min.js"></script>
	<!--Bootstrap JS -->
	<script src="/webjars/bootstrap/js/bootstrap.min.js"></script>



</body>
</html>

simplerating.css

@charset "ISO-8859-1";

.checked {
	color: orange;
}

Minhas estrelas de avaliação não colorem em laranja devido ao CSS não reconhecer.
Lembrando que, se adiciono esses códigos do CSS no própio HTML, funciona perfeitamente.
Segue o repositório.


Ficarei muito agradecido se alguém puder ajudar. Estou gostando muito de usaro Spring e isso está me travando por muito tempo.

Onde estão seus arquivos css?

resources/static/css. Ví em vários tópicos que o Spring reconhece os arquivos por padrão na pasta Static

Caso voce coloque desta forma “css/nomedoarquivo.css” ele nao esta localizando??

Tbm não localiza.

Mano, baixei e rodei seu projeto aqui e o css carregou de boa.

Ou teria que ter carregado mais coisas além disso?

Esse botão amarelo tem que ficar redondo. Se tu jogar o código do “circlebuttons.css” no style do header, vai dar certo. Linkando, simplesmente não aplica.

Fiz mais vários testes e acredito que seja algum conflito do Bootstrap com meus CSSs próprios. Criei uma html de testes e fui testando. Acontece que os resultados não eram exatos, por exemplo: As vezes eu limpava o cache do roteador, funcionava, as vezes não. As vezes dava um Update no projeto, funcionava e as vezes não. Basicamente fiz uma cópia da minha página, uma funcionou e outra não.
Se está cópia funcionasse pra sempre, tudo bem kkk Mas já apresentou algumas falhas também. Alguém já enfrentou algum problema do tipo? Algum conflito com Bootstrap…

Ola,
Como voce esta configurando o spring? esta usando o spring-boot? Voce precisa dizer para o spring onde carregar os recursos. tem duas formas via classe de configuracao e via arquivo xml.

lembrando como voce ja disse, os arquivos css precisam estar em resources/static/css e serem referencidos

via classe:

@Configuration
@ComponentScan(basePackageClasses = { HomeController.class })
@EnableWebMvc
public class WebConfig extends WebMvcConfigurerAdapter implements ApplicationContextAware {

private ApplicationContext applicationContext;

@Override
public void setApplicationContext(ApplicationContext applicationContext) throws BeansException {
	this.applicationContext = applicationContext;
}

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

}

via xml no arquivo de configuracao do servlet:

<mvc:resources mapping="/resources/**" location="/resources/" />
1 curtida