IntelliJ Spring Boot with JSP Project, css does not work

Permanently deleted user

Created November 26, 2018 06:05

I create a Spring Boot project by IntelliJ 2018.2.5x64.

I write a main.css in resources/static.css.

The content of main.css as below

h1{
    color:#0000FF;
}

h2{
    color:#FF0000;
}

welcome.jsp in webapp/WEB-INF/jsp, its content as below

<!DOCTYPE html>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html lang="en">

<head>

    <!-- Access the bootstrap Css like this,
        Spring boot will handle the resource mapping automcatically -->
    <link rel="stylesheet" type="text/css" href="webjars/bootstrap/3.3.7/css/bootstrap.min.css" />

    <!--
   <spring:url value="/css/main.css" var="springCss" />
   <link href="${springCss}" rel="stylesheet" />
    -->
    <c:url value="/css/main.css" var="jstlCss" />
    <link href="${jstlCss}" rel="stylesheet" />

</head>
<body>

<nav class="navbar navbar-inverse">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Spring Boot</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
            </ul>
        </div>
    </div>
</nav>

<div class="container">

    <div class="starter-template">
        <h1>Spring Boot Web JSP Example</h1>
        <h2>Message: ${message}</h2>
    </div>

</div>

<script type="text/javascript" src="webjars/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>

</html>

My problem is the h1 and h2 style are not be loaded. The texts always are black.
I see the source code in the google chrome as below:

<head>

	<!-- Access the bootstrap Css like this,
	Spring boot will handle the resource mapping automcatically -->
	<link rel="stylesheet" type="text/css" href="webjars/bootstrap/3.3.7/css/bootstrap.min.css" />

	<!--

	<link href="/css/main.css" rel="stylesheet" />
	-->

	<link href="/css/main.css" rel="stylesheet" />

	</head>

I click the /css/main.css, the google chrome appears the error as below:

Whitelabel Error Page

This application has no explicit mapping for /error, so you are seeing this as a fallback.

Mon Nov 26 13:54:40 GMT+08:00 2018

There was an unexpected error (type=Not Found, status=404).

No message available

Does somebody know how to set the path of the css in IntelliJ?

I reference the web, but the project of this web is successful to use the css path of "/css/main.css".
https://www.mkyong.com/spring-boot/spring-boot-hello-world-example-jsp/

Please sign in to leave a comment.