Including css in spring based project with vaadin

Question

Trying to include simple css file to a vaadin route Using spring boot and have a maven project. When i load the page on the client i get this error:

Refused to apply style from 
'http://localhost:8080/frontend/css/msas_login_page.css' because its MIME 
type ('text/html') is not a supported stylesheet MIME type, and strict MIME 
checking is enabled.

And when i try to access the above url, i get redirected to this html error page

Could not navigate to 'css/msas_login_page.css'
Reason: Couldn't find route for 'css/msas_login_page.css'

Here's my code:

package com.msas.MSAS.UIControllers;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.MessageSource;
import org.springframework.web.context.annotation.SessionScope;

import com.msas.MSAS.UIControllers.Authentication.MSASLoginForm;
import com.vaadin.flow.component.dependency.StyleSheet;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.AfterNavigationEvent;
import com.vaadin.flow.router.AfterNavigationObserver;
import com.vaadin.flow.router.Route;

@Route("loginPage")
@VaadinSessionScope
@StyleSheet("css/msas_login_page.css")
public class MSASLoginPage extends HorizontalLayout implements
        AfterNavigationObserver {

    private static final long serialVersionUID = 8673461297922218502L;

    private MSASLoginForm loginForm;
    private VerticalLayout container;

    public MSASLoginPage(@Autowired MessageSource messageSource) {
        super();

        this.initComponents(messageSource);
    }

    private void initComponents(MessageSource messageSource) {
        this.loginForm = new MSASLoginForm(messageSource);

        this.container = new VerticalLayout();
        this.container.setDefaultHorizontalComponentAlignment(Alignment.CENTER);
        this.container.add(this.loginForm);

        this.addClassName("login-page-container");
        this.setDefaultVerticalComponentAlignment(Alignment.CENTER);
        this.setHeightFull();
        this.add(this.container);
    }

    @Override
    public void afterNavigation(AfterNavigationEvent event) {
        boolean isError = event.getLocation().getQueryParameters()
                .getParameters().containsKey("error");
        this.loginForm.setError(isError);
    }
}

Here's my project structure:

src
- main
- - java
- - - ...
- - resources
- - - ...
- - webapp
- - - frontend
- - - - css
- - - - msas_login_page.css

This is css file content:

.login-page-container{
}

the css folder belongs into the frontend folder. Also, you probably want to add a `main` folder after `src` and before the rest, to conform with the [maven standard directory layout](https://maven.apache.org/guides/introduction/introduction-to-the-standard-directory-layout.html) — kscherrer, Mar 18 '19 at 17:23
Yes sorry there's a main folder, forgot to include it and i tried both situations, putting css folder inside frontend and outside it and same problem — Sidi Mohamed MOULEY SLIMANE, Mar 18 '19 at 17:29
have you changed the relative url to the background image when you moved the css folder around? — kscherrer, Mar 18 '19 at 17:30
The prolem exists even if i remove the background-image attribute to have a css file of 1 empty class :/ — Sidi Mohamed MOULEY SLIMANE, Mar 18 '19 at 17:31
can you try again with the css folder in the frontend folder, but this time without the leading slash in the stylesheet annotation? `@StyleSheet("css/msas_login_page.css")` — kscherrer, Mar 18 '19 at 17:35
sure ! i've tried like u said and edited the post .... same issue — Sidi Mohamed MOULEY SLIMANE, Mar 18 '19 at 17:52

score 0 · Accepted Answer · answered Mar 19 '19 at 09:25

Fixed the problem.

I was using a multi-modules maven project, and the main method which contains the @SpringBootApplication and which runs the entire application was not in the same module where the vaadin frontend folder.

Solution was to move the main class to the same maven module as the one used for vaadin.

Including css in spring based project with vaadin

1 Answers1