Thymeleaf와 Spring의 스타일 시트를 연결하는 데 문제가 있습니다.

저는이 문제로 오래 동안 고심하고 있었지만 아직 해결하지 못했습니다.Thymeleaf와 Spring의 스타일 시트를 연결하는 데 문제가 있습니다.

외부 CSS 파일을 작동시킬 수 없습니다. 브라우저는 항상 200 개의 성공 메시지를 표시하지만 파일은 절대로드되지 않습니다.

나는 여러 가지 방법을 시도했지만이는 순간에 모습입니다 :

HTML 파일에 링크 :

<!DOCTYPE HTML> 
<html xmlns:th="http://www.thymeleaf.org"> 
<head> 
    <title>Tourverwalter</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <link rel="stylesheet" type="text/css" th:href="@{/assets/css/myStyle.css}" /> 
</head>

CSS 파일 :

body { 
    background-color: lightblue; 
    text-align: center; 
} 
.button { 
    background-color: #4CAF50; /* Green */ 
    border: none; 
    color: white; 
    padding: 15px 32px; 
    text-align: center; 
    text-decoration: none; 
    display: inline-block; 
    font-size: 16px; 
    width: 20%; 
    cursor: pointer; 
} 

header{ 
    vertical-align: top; 
} 

.container { 
    width: 75%; 
    height: 30px; 
    padding: 10px; 
} 

.left { 
    width: 40%; 
    height:30px; 
    float: left; 
} 

.right { 
    margin-left: 60%; 
    height: 30px; 
}

WebMcvConfig 파일 :

package ese4.configuration; 

import org.springframework.context.annotation.Bean; 
import org.springframework.context.annotation.Configuration; 
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder; 
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry; 
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter; 

@Configuration 
public class WebMvcConfig extends WebMvcConfigurerAdapter { 

    @Bean 
    public BCryptPasswordEncoder passwordEncoder() { 
     BCryptPasswordEncoder bCryptPasswordEncoder = new BCryptPasswordEncoder(); 
     return bCryptPasswordEncoder; 
    } 

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

    } 

}

,451,515,

그리고 폴더 계층 구조 :

src/main/resources/static/css

을 그리고 당신이 무시 addResourceHandlers 방법을 제거 할 수 있습니다 : 당신이 봄 부팅을 사용하는 경우 Folder Hierarchy

출처

2017-12-01 Robin Steiner

것은 당신이 봄 부팅을 사용하고 있습니까 :

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

마지막으로, 다른 방법으로 단순화 할 수있다? – bphilipnyc

예 스프링 부트를 사용 중입니다. –

, 나는 당신이 당신의 구조를 변경하는 것이 좋습니다 것입니다. Spring Boot will use the static folder to serve your static content. 이외에도

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

는 그런 다음에 링크를 업데이트 할 당신은 또한 CSS에 href 경로를 포함 할 것입니다 당신이 봄 부팅을로드하지 않고 브라우저에서 파일을 열 때, 당신이 할 수 있도록 여전히 CSS의 효과를 볼 수 있습니다. UI 사용자가 서식있는 페이지를보기 위해 Java 또는 Spring에 대해 알 필요가 없으므로 Thymeleaf를 사용하는 것이 큰 이점입니다.

@Bean 
public PasswordEncoder passwordEncoder() { 
    return new BCryptPasswordEncoder(); 
}

출처

2017-12-02 01:03:46 bphilipnyc

먼저 대답 해 주셔서 감사합니다. 문제는 여전히 작동하지 않습니다 ... 여전히 CSS가 성공적으로 완료되지만로드되지 않습니다. 그리고 그것은 여전히 경고로 말합니다 : 리소스는 스타일 시트로 해석되었지만 MIME 형식으로 전송되었습니다 text/html : 다른 아이디어가 있습니까? –

전체 스택 추적을 게시 할 수 있습니까? – bphilipnyc

또한 파일 이름의 제목이 정확히 myStyle.css – bphilipnyc

Thymeleaf와 Spring의 스타일 시트를 연결하는 데 문제가 있습니다.

답변

관련 문제