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

8 respostas
springjavajavascriptcss
AlexOvechkin

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.

8 Respostas

FearX

Onde estão seus arquivos css?

AlexOvechkin

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

igoralves

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

AlexOvechkin

Tbm não localiza.

Lucas_Camara

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

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

AlexOvechkin

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.

AlexOvechkin

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…

thimor

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/" />
Criado 30 de julho de 2019
Ultima resposta 3 de ago. de 2019
Respostas 8
Participantes 5