I cannot change the theme for my UI in Vaadin

Question

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

Answer 1

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