I am trying to set a new background color for my buttons in Vaadin.
But my UI does not seem to load mytheme
since the components loose their look and looks like plain html without styling.
@Title("My cooool Vaadin project")
@Theme("mytheme")
public class MainUI extends UI {
@Override
protected void init(VaadinRequest request) {
Panel panel = new Panel();
FormLayout formLayout = new FormLayout();
Button button = new Button("Press me!!!");
button.addClickListener(new Button.ClickListener() {
@Override
public void buttonClick(Button.ClickEvent event) {
System.out.println("BUTTON CLICKED!!!");
}
});
formLayout.addComponent(button);
panel.setContent(formLayout);
Window window = new Window();
window.setContent(panel);
window.setWindowMode(WindowMode.MAXIMIZED);
this.addWindow(window);
}
@WebServlet(urlPatterns = "/*", name = "MainUI", asyncSupported = true)
@VaadinServletConfiguration(ui = MainUI.class, productionMode = false)
public static class UIServlet extends VaadinServlet {
}
}
I have this file structure as it is on this image: https://i.stack.imgur.com/AWeSz.png
mytheme.scss:
@import "../valo/valo.scss";
@mixin mytheme {
@include valo;
/* An actual theme rule */
.v-button {
color: blue;
background: aquamarine;
}
}
styles.scss:
@import "addons.scss"; /* I also have the addons.scss file*/
@import "mytheme.scss";
.mytheme {
@include addons;
@include mytheme;
}
In my pom.xml I have both the vaadin-client-compiled
and vaadin-client-compiler
, both the latest version (7.4.3). And of course vaadin-themes
and all the other vaadin dependencies.
EDIT
09:07:36,726 INFO [org.wildfly.extension.undertow] (MSC service thread 1-4) JBAS017534: Registered web context: /vaadinproject
09:07:36,844 INFO [org.jboss.as.server] (DeploymentScanner-threads - 2) JBAS018559: Deployed "vaadinproject.war" (runtime-name : "vaadinproject.war")
09:07:37,618 INFO [com.vaadin.server.VaadinServlet] (default task-31) Request for /VAADIN/themes/mytheme/styles.css not handled by sass compiler while in production mode
09:07:41,538 WARNING [com.vaadin.server.communication.UidlRequestHandler] (default task-2) Invalid security key received from 127.0.0.1
09:07:41,708 INFO [com.vaadin.server.VaadinServlet] (default task-6) Request for /VAADIN/themes/mytheme/styles.css not handled by sass compiler while in production mode
I see that you have not enabled productionMode, i.e.,
productionMode = false
and your theme is not compiling, I guess.Please clean the mvn project using following command:
mvn eclipse:clean
and rebuild your project.See here for more info: https://maven.apache.org/plugins/maven-eclipse-plugin/clean-mojo.html