[英]Including css in spring based project with vaadin
Trying to include simple css file to a vaadin route Using spring boot and have a maven project. 尝试将简单的css文件包含到vaadin路由中使用Spring Boot并拥有一个Maven项目。 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 当我尝试访问上述网址时,我将重定向到此html错误页面
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: 这是我的项目结构:
This is css file content: 这是css文件的内容:
.login-page-container{
}
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. 我正在使用多模块Maven项目,而包含@SpringBootApplication并运行整个应用程序的主要方法与vaadin前端文件夹不在同一个模块中。
Solution was to move the main class to the same maven module as the one used for vaadin. 解决方案是将主类移至与vaadin相同的maven模块。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.