使用 vaadin 在基于 Spring 的项目中包含 css答案

【问题标题】：Including css in spring based project with vaadin使用 vaadin 在基于 Spring 的项目中包含 css
【发布时间】：2019-03-18 17:12:19
【问题描述】：

尝试将简单的 css 文件包含到 vaadin 路由中使用spring boot并拥有一个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);
    }
}

这是我的项目结构：

源代码
- 主要
- - java
- - - ...
- - 资源
- - - ...
- - 网络应用
- - - 前端
- - - - CSS
- - - - msas_login_page.css

这是css文件内容：

.login-page-container{
}

【问题讨论】：

css 文件夹属于前端文件夹。此外，您可能希望在src 之后和其余部分之前添加一个main 文件夹，以符合maven standard directory layout
是的，很抱歉有一个主文件夹，忘记包含它，我尝试了两种情况，将 css 文件夹放在前端和外部，同样的问题
你在移动css文件夹时是否将相对url更改为背景图片？
即使我删除 background-image 属性以拥有 1 个空类的 css 文件，问题仍然存在：/
你能用前端文件夹中的 css 文件夹再试一次，但这次没有样式表注释中的前导斜杠吗？ @StyleSheet("css/msas_login_page.css")

标签： java css spring spring-boot vaadin-flow

【解决方案1】：

解决了问题。

我使用的是多模块 maven 项目，包含 @SpringBootApplication 并运行整个应用程序的主要方法不在 vaadin 前端文件夹所在的同一模块中。

解决方案是将主类移动到与用于 vaadin 的模块相同的 maven 模块中。

【讨论】：