I cant include css file in jsp page

Question

I tried various tutorials but it simply dosen't work.

I am building spring application with boostrap. I want to include bootstrap.min.css in my jsp page.

Here is my project tree:

this is my spring configuration file:

    <?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:context="http://www.springframework.org/schema/context"
    xmlns:mvc="http://www.springframework.org/schema/mvc"
    xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.0.xsd
        http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd">

    <mvc:annotation-driven />
    <context:component-scan base-package="com.packt.webstore" />
    <mvc:resources mapping="/resources/**" location="/WEB-INF/resources/" />
    <mvc:resources  location="WEB-INF"  mapping="/resource"/>
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/views/" />
        <property name="suffix" value=".jsp" />
    </bean>
    <bean id="multipartResolver"  class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="maxUploadSize" value="10240000"/>
    </bean>
</beans>

This line is important:

    <mvc:resources mapping="/resources/**" location="/WEB-INF/resources/" />

This is my view page:

I uploaded image on purpose to show that I can't even import it because it dosen't recognize the path. Well I tried other configuration but I can't figure out how to do it the right way.

Answer 1

you can use the jstl :

<link href="<c:url value="/resources/css/main.css" />" rel="stylesheet">
<script src="<c:url value="/resources/js/jquery.1.10.2.min.js" />"></script>

or Spring tags :

<spring:url value="/resources/js/jquery.1.10.2.min.js" var="jqueryJs" />
<spring:url value="/resources/js/main.js" var="bootstrap" />

<link href="${bootstrap}" rel="stylesheet" />
<script src="${jqueryJs}"></script>

or

<link href="${pageContext.request.contextPath}/resources/css/main.css" rel="stylesheet" > 
<script src="${pageContext.request.contextPath}/resources/css/jquery.js"></script>

Answer 2

Some time ago I've created simple web app using jsp and servlets and I had same problem. I've resolved this by adding context name at the beginning of every url. Here is example of that url:

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/form-style.css" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/edit-contact-form-style.css" />

<script src="${pageContext.request.contextPath}/js/edit-contact-form-scripts.js"></script>
<script src="${pageContext.request.contextPath}/js/datetimepicker.js"></script>

Try it. I hope this helps.

Answer 3

configure view resolver and move the css files under the configured location. you can refer this already answered question: spring mvc where to put css/js/img files

Answer 4

If you want to be not like those xml losers and do an app with zero xml, don't forget to make a class like this:

public class DemoAppConfig implements WebMvcConfigurer {
    @Bean
    public ViewResolver viewResolver() {
        final InternalResourceViewResolver bean = new InternalResourceViewResolver();

        bean.setViewClass(JstlView.class);
        bean.setPrefix("/WEB-INF/view/pages/");
        bean.setSuffix(".jsp");



        return bean;
    }


    public void addResourceHandlers(final ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/resources/**").addResourceLocations("/resources/");
    }
}