VAADIN cannot find themes when in productionMode

Question

I have custom theme for my VAADIN application in src/main/webapp/VAADIN/themes/mytheme/ with files mytheme.scss and styles.scss. Everything works fine when the vaadin productionMode deployment parameter is set to false in web.xml. When I set the parameter to true, suddenly Vaadin cannot find the resources for my theme and keeps complaining with:

Requested resource [/VAADIN/themes/mytheme/styles.css] not found from filesystem or through class loader. Add widgetset and/or theme JAR to your classpath or add files to WebContent/VAADIN folder

I dont have a /WebContent directory but /webapp instead, since its a maven web-app project. I tried putting the VAADIN folder to:
src/main/resources
src/main/webapp
src/main/webapp/WEB-INF

but nothing works for the production mode. Any suggenstions? Thank you in advance for help.

Answer 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

Answer 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.

Answer 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>