时间戳

首页 > 解决方案 > 使用 vaadin 在基于 Spring 的项目中包含 css

java - 使用 vaadin 在基于 Spring 的项目中包含 css

问题描述

尝试使用 spring boot 将简单的 css 文件包含到 vaadin 路由并拥有一个 maven 项目。当我在客户端加载页面时，出现此错误：

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.

当我尝试访问上面的 url 时，我被重定向到这个 html 错误页面

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

这是我的代码：

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);
    }
}

这是我的项目结构：

这是css文件内容：

.login-page-container{
}

标签： javacssspringspring-bootvaadin-flow

解决方案

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.

推荐阅读