Problema ao carregar propriedades css no javaweb com spingBoot

6 respostas Resolvido
javascriptjava
R

Bom dia pessoal.
Estou con problemas em carregar propriedades css no javaweb com spingBoot.
na edição do html na pagina de teste ele carrega as config, mas quando inicia o console pra de fato acessar a pagina com spring nao carrega

minha classe main
package com.example.apontamento;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class ApontamentoApplication {

public static void main(String[] args) {
	SpringApplication.run(ApontamentoApplication.class, args);
}

}

controller

package com.example.apontamento;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RestController;

import org.springframework.web.servlet.ModelAndView;

@RestController
public class ControllerLogin {

@RequestMapping("/")
public ModelAndView login(){
    return new ModelAndView("login.html");
}

}
pom.xml

<?xml version="1.0" encoding="UTF-8"?>


4.0.0

org.springframework.boot
spring-boot-starter-parent
2.3.1.RELEASE


com.example
apontamento
0.0.1-SNAPSHOT
Demo project for Spring Boot

<properties>
	<java.version>1.8</java.version>
</properties>
<dependencies>
	<dependency>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-thymeleaf</artifactId>
	</dependency>
	<dependency>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-web</artifactId>
	</dependency>
	<dependency>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-test</artifactId>
		<scope>test</scope>
		<exclusions>
			<exclusion>
				<groupId>org.junit.vintage</groupId>
				<artifactId>junit-vintage-engine</artifactId>
			</exclusion>
		</exclusions>
	</dependency>
</dependencies>

<build>
	<plugins>
		<plugin>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-maven-plugin</artifactId>
		</plugin>
	</plugins>
</build>

html

Login
<!--Bootsrap 4 CDN-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
      integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<!--Fontawesome CDN-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
      integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

<!--Custom styles-->
<link rel="stylesheet" type="text/css" href="../static/login.css">

6 Respostas

T
<link rel="stylesheet" type="text/css" th:href="@{login.css}"/>
R

Obrigado pela resposta meu amigo mas mesmo assim não funcionou

R

Nao consigo usar este “th:”
Apenas desta maneira:

T

Adicione a tag html como esta.

<!DOCTYPE html>
<html lang="pt" xmlns="http://www.w3.org/1999/xhtml" 
	xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
	<meta charset="UTF-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<meta name="viewport" content="width=device-width, initial-scale=1"/>

	<link rel="stylesheet" type="text/css" th:href="@{/layout/plugins/fontawesome-free/css/all.min.css}"/>	
	<link rel="stylesheet" type="text/css" th:href="@{/layout/plugins/overlayScrollbars/css/OverlayScrollbars.min.css}"/>
  	<link rel="stylesheet" type="text/css" th:href="@{/layout/plugins/select2/css/select2.min.css}">
  	<link rel="stylesheet" type="text/css" th:href="@{/layout/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css}">
	<link rel="stylesheet" type="text/css" th:href="@{/layout/dist/css/adminlte.min.css}"/>
	<link rel="stylesheet" type="text/css" th:href="@{/layout/plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css}">

	
	<link rel="stylesheet" type="text/css" th:href="@{/stylesheets/vendors/bootstrap-datepicker.standalone.min.css}"/>
	
	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
		<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
</head>

coloque essas duas dependencias no seu pom.xml, se nao for projeto maven, vai ter que baixar os jars.

<dependency>
			<groupId>nz.net.ultraq.thymeleaf</groupId>
			<artifactId>thymeleaf-layout-dialect</artifactId>
		</dependency>
		<dependency>
			<groupId>com.github.mxab.thymeleaf.extras</groupId>
			<artifactId>thymeleaf-extras-data-attribute</artifactId>
		</dependency>

e no application.properties

spring.thymeleaf.template-resolver-order=1
spring.thymeleaf.mode=HTML

voce nao coloca a pasta static na sua referencia.

R

Caraaa funcionou! muito obrigado sofri demais estou começando agora com springboot .
Uma duvida as imagens que coloco no html não consegue carregar também, como eu faço?
Hoje esta assim:

T
Solucao aceita

vale a mesma regra. para css, javascript e imagens, dentro de static voce cria as pastas css, javascript e imagens. e quando for referenciar um arquivo th:src="@{/imagens/logotipo.png}" th:src="@{/javascript/index.js}"

Criado 15 de julho de 2020
Ultima resposta 21 de jul. de 2020
Respostas 6
Participantes 2