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

Programação
, , ,
#1

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.

#2

Onde estão seus arquivos css?

#3

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

#4

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

#5

Tbm não localiza.

#6

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

image
image.png1920×1050 107 KB

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

#7

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.

#8

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…

#9

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