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{
}

Answer 1

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.