尝试使用 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
- msas_login_page.css
这是css文件内容:
.login-page-container{
}