VAADIN cannot find themes when in productionMode

Solution 1:

You need to add following goal to your pom.xml, which will compile the .scss files to .css files:

<plugin>
    <groupId>org.codehaus.mojo</groupId>
    <artifactId>exec-maven-plugin</artifactId>
    <version>1.2.1</version>
    <executions>
        <execution>
            <phase>generate-sources</phase>
            <goals>
                <goal>java</goal>
            </goals>
            <configuration>
                <classpathScope>compile</classpathScope>
                <mainClass>com.vaadin.sass.SassCompiler</mainClass>
                <arguments>
                    <argument>src/main/webapp/VAADIN/themes/heijunka/styles.scss</argument>
                    <argument>src/main/webapp/VAADIN/themes/heijunka/styles.css</argument>
                </arguments>
            </configuration>
        </execution>
    </executions>
</plugin>

Source: http://dev.vaadin.com/ticket/10291

Solution 2:

@Develman already answered how to fix the problem but a bit more explanation.

When a Vaadin application is in development mode, it does the SCSS -> CSS compilation automatically when styles.css is requested and the file does not exist. In the production mode this does not happen. If styles.css exists, regardless of mode, the file is used and there is no SCSS -> CSS compilation.

Solution 3:

I got this error even-though I've added maven goal to pom.xml Finally got to know the reason, Its because of I've enabled production mode of Vaadin on web.xml So when production mode on, its not generating styles.css file. So you need to disable production mode in order to enable this SCSS - > CSS compilation.

<context-param>
    <description>Vaadin production mode</description>
    <param-name>productionMode</param-name>
    <param-value>false</param-value>
</context-param>