CSS not reflecting on Maven build Spring-Hibernate project

Question

I have a Spring-Hibernate project built on Maven in Eclipse using Eclipse M2E plugin. While my functionality works fine, I need to give some visual appeal to the application and I wish to use CSS for the same. However, my CSS never reflects on the application. I have already tried to look at a couple of closely associated question on stackoverflow but could not get a it right.

Spring not finding resource files (css, jsp...)

External CSS does not load in web page

Here is what I tried (a lot of hit and trials on the jsp itself):

index.jsp

> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html
> xmlns="http://www.w3.org/1999/xhtml"> <%@page contentType="text/html"
> %>
> 
> <%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@page
> session="true"%> <html> <head> <link rel="stylesheet"
> href="${pageContext.request.contextPath}/styles.css" /> <link
> rel="stylesheet" href="styles.css" /> <link rel="stylesheet"
> href="<c:url value="style.css"/>"  type="text/css" />   

    <!-- even tried this with some reference I got somewhere, 
while this atleast gave the body the color as mentioned in CSS, 
nothing else worked including the form fields-->

<style>
<%@include file="styles.css"%>
</style>
</head>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
    id="WebApp_ID" version="2.5">

    <display-name>Spring MVC Application</display-name>

    <!-- Spring MVC -->
    <servlet>
        <servlet-name>mvc-dispatcher</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>mvc-dispatcher</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>

    <servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.css</url-pattern>
    </servlet-mapping>

    <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    </listener>

    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>
            /WEB-INF/spring-security.xml
        </param-value>
    </context-param>

    <!-- Spring Security -->
    <filter>
        <filter-name>springSecurityFilterChain</filter-name>
        <filter-class>org.springframework.web.filter.DelegatingFilterProxy</filter-class>
    </filter>

    <filter-mapping>
        <filter-name>springSecurityFilterChain</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

</web-app>

Request mapping in Controller:

@RequestMapping("/")
public ModelAndView welcomePage(Map<String, Object> map) {

    ModelAndView model = new ModelAndView();
    model.setViewName("index");

    // more code

    return model;

}

Have you tried this one? http://stackoverflow.com/questions/13376473/accessing-resources-in-jsp-page-of-spring-mvc-app — nhavar, May 16 '14 at 06:41
Are you sure your css get's included in deployment archive? It sounds stupid, but did you check css is available on server. Making maven include desired files to build may be tricky depending on their path and extension. You may need to apply some custom filtering. — skegg99, May 16 '14 at 14:23
your comment sounds interesting @skegg99, can you pls elaborate? — Sadique Khan, May 21 '14 at 06:29
@nhavar, yes I tried it the similar way earlier as well, bit refinement solved the issue. Thanx :) — Sadique Khan, May 21 '14 at 06:31

score 0 · Answer 1 · answered May 16 '14 at 12:17

You need to make sure your css file is located at the correct place. For example, here is the structure I used:

\webapp\resources\css\mycss.css
\webapp\resources\images
\webapp\WEB-INF\

in my jsp I refer to the css like this:

<link href="<c:url value="/resources/css/mycss.css"/>" rel="stylesheet">

with spring-mvc, you need also to specify where are the resources located, in your spring-mvc.xml file, add this:

<mvc:resources location="/resources/" mapping="/resources/**" />

score 0 · Accepted Answer · answered May 21 '14 at 06:27

Thank you for the responses, Fellas.

While

<style>
<%@include file="styles.css"%>
</style>

in the JSP earlier did half of the work for me, I was facing issues with mapping not found for .jpg file referred in CSS.

Adding

<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.jpg</url-pattern>
</servlet-mapping>

solved the rest of the issue for me. While I am still not getting the BG image on the page, rest of the style i.e. colors and fonts are working fine. Looking further to make the visual appeal better.

CSS not reflecting on Maven build Spring-Hibernate project

2 Answers2