Can't Compile Theme scss

Vaadin 6 / 7 / 8
1

Hi,
I can’t compile my .scss theme. When I run my app I see this logs:


com.vaadin.server.VaadinServlet serveOnTheFlyCompiledScss
INFO: Request for /VAADIN/themes/mytheme/styles.css not handled by sass compiler while in production mode

This is my ivy.xml


<?xml version="1.0"?>
<!DOCTYPE ivy-module [
	<!ENTITY vaadin.version "7.1.3">
]>
<ivy-module version="2.0"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:noNamespaceSchemaLocation="http://ant.apache.org/ivy/schemas/ivy.xsd">
	<info organisation="com.example" module="v7proj" />
	<configurations>
		<!-- The default configuration, which should be deployed to the server -->
		<conf name="default" />
		<!-- A configuration only needed when compiling the widget set. Should 
			not be deployed to the server -->
		<conf name="widgetset-compile" />
		<conf name="compile-theme" />
	</configurations>
	<dependencies>
		<!-- The core server part of Vaadin -->
		<dependency org="com.vaadin" name="vaadin-server" rev="&vaadin.version;"
			conf="default->default" />

		<!-- Vaadin themes -->
		<dependency org="com.vaadin" name="vaadin-themes" rev="&vaadin.version;" />
		
		<dependency org="com.vaadin" name="vaadin-theme-compiler"
            rev="&vaadin.version;" conf="compile-theme->default" />
		
		<!-- Precompiled DefaultWidgetSet -->
		<dependency org="com.vaadin" name="vaadin-client-compiled"
			rev="&vaadin.version;" />

		<!-- Vaadin client side, needed for widget set compilation -->
		<dependency org="com.vaadin" name="vaadin-client" rev="&vaadin.version;" />

		<!-- Compiler for custom widget sets. Should not be deployed -->
		<dependency org="com.vaadin" name="vaadin-client-compiler"
			rev="&vaadin.version;" conf="widgetset-compile->default" />
			
	    <dependency org="javax.persistence" name="persistence-api" rev="1.0"/>
	    
        <dependency org="com.vaadin" name="vaadin-push" rev="&vaadin.version;" conf="default->default">
         <exclude org="org.slf4j" name="slf4j-api"/>
        </dependency>
	</dependencies>
</ivy-module>

This is my pom.xml


<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>com.myapp</groupId>
	<artifactId>myapp</artifactId>
	<packaging>war</packaging>
	<version>1.0.0</version>
	<name>Vaadin Web Application</name>

	<properties>
		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
		<vaadin.version>7.1.3</vaadin.version>
		<vaadin.plugin.version>${vaadin.version}</vaadin.plugin.version>
	</properties>
	<repositories>
		<repository>
			<id>vaadin-addons</id>
			<url>http://maven.vaadin.com/vaadin-addons</url>
		</repository>
		<repository>
			<id>vaadin-snapshots</id>
			<url>http://oss.sonatype.org/content/repositories/vaadin-snapshots/</url>
			<releases>
				<enabled>false</enabled>
			</releases>
			<snapshots>
				<enabled>true</enabled>
			</snapshots>
		</repository>
		<repository>
            <id>EclipseLink Repo</id>
            <url>http://www.eclipse.org/downloads/download.php?r=1&amp;nf=1&amp;file=/rt/eclipselink/maven.repo</url>
        </repository>
	</repositories>
	<pluginRepositories>
		<pluginRepository>
			<id>vaadin-snapshots</id>
			<url>http://oss.sonatype.org/content/repositories/vaadin-snapshots/</url>
			<releases>
				<enabled>false</enabled>
			</releases>
			<snapshots>
				<enabled>true</enabled>
			</snapshots>
		</pluginRepository>
	</pluginRepositories>

	<dependencies>
		<dependency>
			<groupId>com.vaadin</groupId>
			<artifactId>vaadin-server</artifactId>
			<version>${vaadin.version}</version>
		</dependency>
		<dependency>
			<groupId>com.vaadin</groupId>
			<artifactId>vaadin-client-compiled</artifactId>
			<version>${vaadin.version}</version>
		</dependency>
		<!--
		  Needed when using the widgetset optimizer (custom ConnectorBundleLoaderFactory).
		  
		  For widgetset compilation, vaadin-client-compiler is automatically added on the
		  compilation classpath by vaadin-maven-plugin so normally there is no need for an
		  explicit dependency.
		-->
		
		<dependency>
			<groupId>com.vaadin</groupId>
			<artifactId>vaadin-client-compiler</artifactId>
			<version>${vaadin.version}</version>
			<scope>provided</scope>
		</dependency>
		
		<dependency>
			<groupId>com.vaadin</groupId>
			<artifactId>vaadin-client</artifactId>
			<version>${vaadin.version}</version>
			<scope>provided</scope>
		</dependency>
		<dependency>
			<groupId>com.vaadin</groupId>
			<artifactId>vaadin-push</artifactId>
			<version>${vaadin.version}</version>
		</dependency>
		<dependency>
		      <groupId>com.vaadin</groupId>
		      <artifactId>vaadin-theme-compiler</artifactId>
		      <version>${vaadin.version}</version>
		      <scope>runtime</scope>
		    </dependency>
		    <dependency>
		      <groupId>com.vaadin</groupId>
		      <artifactId>vaadin-themes</artifactId>
		      <version>${vaadin.version}</version>
		      <scope>runtime</scope>
		</dependency>
		<dependency>
		   <groupId>org.vaadin.addon</groupId>
		   <artifactId>v-leaflet</artifactId>
		   <version>0.0.8</version>
		</dependency>
		<dependency>
		   <groupId>org.vaadin.addons</groupId>
		   <artifactId>refresher</artifactId>
		   <version>1.2.1.7</version>
		</dependency>
		<dependency>
		   <groupId>com.vaadin.addon</groupId>
		   <artifactId>jpacontainer</artifactId>
		   <version>3.0.0</version>
		</dependency>
		<dependency>
			<groupId>com.vaadin</groupId>
			<artifactId>vaadin-push</artifactId>
			<version>${vaadin.version}</version>
		</dependency>
		<dependency>
			<groupId>joda-time</groupId>
			<artifactId>joda-time</artifactId>
			<version>2.3</version>
		</dependency>      
		<dependency>
			<groupId>javax.persistence</groupId>
			<artifactId>persistence-api</artifactId>
			<version>1.0-rev-1</version>
		</dependency>
        <dependency>
            <groupId>org.eclipse.persistence</groupId>
            <artifactId>eclipselink</artifactId>
            <version>2.2.0</version>
        </dependency>
        <dependency>
            <groupId>org.eclipse.persistence</groupId>
            <artifactId>javax.persistence</artifactId>
            <version>2.0.0</version>
        </dependency>
        <dependency>
            <groupId>com.h2database</groupId>
            <artifactId>h2</artifactId>
            <version>1.3.160</version>
        </dependency>
        <dependency>
            <groupId>org.hibernate</groupId>
            <artifactId>hibernate-validator</artifactId>
            <version>4.2.0.Final</version>
        </dependency>
        <dependency>
			<groupId>org.hibernate</groupId>
			<artifactId>hibernate-entitymanager</artifactId>
			<version>3.6.10.Final</version>
		</dependency>
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>javax.servlet-api</artifactId>
			<version>3.0.1</version>
			<scope>provided</scope>
		</dependency>
		<dependency>
			<groupId>javax.validation</groupId>
			<artifactId>validation-api</artifactId>
			<version>1.1.0.Final</version>
		</dependency>  
		<dependency>
			<groupId>mysql</groupId>
			<artifactId>mysql-connector-java</artifactId>
			<version>5.1.25</version>
		</dependency>
		<dependency>
		   <groupId>org.vaadin.addons</groupId>
		   <artifactId>refresher</artifactId>
		   <version>1.2.1.7</version>
		</dependency>
		 <dependency>
		    <groupId>org.springframework</groupId>
		    <artifactId>spring-core</artifactId>
		    <version>3.2.3.RELEASE</version>
		  </dependency>
		  <dependency>
		    <groupId>org.springframework</groupId>
		    <artifactId>spring-beans</artifactId>
		    <version>3.2.3.RELEASE</version>
		  </dependency>
		  <dependency>
		    <groupId>org.springframework</groupId>
		    <artifactId>spring-context</artifactId>
		    <version>3.2.3.RELEASE</version>
		  </dependency>
		  
		  <dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-web</artifactId>
			<version>3.2.3.RELEASE</version>
		</dependency>
		            
        <dependency>
			<groupId>org.springframework.security</groupId>
			<artifactId>spring-security-core</artifactId>
			<version>3.1.4.RELEASE</version>
		</dependency>  
		<dependency>
			<groupId>org.springframework.security</groupId>
			<artifactId>spring-security-web</artifactId>
			<version>3.1.4.RELEASE</version>
		</dependency>            
        <dependency>
			<groupId>org.springframework.security</groupId>
			<artifactId>spring-security-config</artifactId>
			<version>3.1.4.RELEASE</version>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-jdbc</artifactId>
			<version>3.2.3.RELEASE</version>
		</dependency>
                  
        <dependency>
            <groupId>commons-pool</groupId>
            <artifactId>commons-pool</artifactId>
            <version>1.5.6</version>
        </dependency>
        <dependency>
            <groupId>commons-dbcp</groupId>
            <artifactId>commons-dbcp</artifactId>
            <version>1.4</version>
            <exclusions>
                <exclusion>
                    <groupId>commons-logging</groupId>
                    <artifactId>commons-logging</artifactId>
                </exclusion>
                <exclusion>
                    <groupId>xml-apis</groupId>
                    <artifactId>xml-apis</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
                <dependency>
            <groupId>commons-collections</groupId>
            <artifactId>commons-collections</artifactId>
            <version>3.2.1</version>
        </dependency>
        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.4</version>
        </dependency>
        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-lang3</artifactId>
            <version>3.1</version>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.18</version>
        </dependency>
        <dependency>
		   <groupId>com.vaadin.tapio</groupId>
		   <artifactId>googlemaps</artifactId>
		   <version>0.6</version>
		</dependency>      
        <dependency>
			<groupId>com.google.code.gson</groupId>
			<artifactId>gson</artifactId>
			<version>2.2.4</version>
		</dependency>
		<dependency>
			<groupId>commons-io</groupId>
			<artifactId>commons-io</artifactId>
			<version>2.4</version>
		</dependency>      
        <dependency>
		   <groupId>org.vaadin.addons</groupId>
		   <artifactId>cssinject</artifactId>
		   <version>2.0.3</version>
		</dependency>
        <dependency>
		   <groupId>com.vaadin.addon</groupId>
		   <artifactId>vaadin-charts</artifactId>
		   <version>1.1.2</version>
		</dependency>
		<dependency>
		   <groupId>org.vaadin.addons</groupId>
		   <artifactId>vaadin-timeline-cval-2.0</artifactId>
		   <version>1.3.1</version>
		</dependency>  
		<dependency>
		   <groupId>com.vaadin.addon</groupId>
		   <artifactId>vaadin-calendar</artifactId>
		   <version>2.0.0</version>
		</dependency>  
		<dependency>
			<groupId>log4j</groupId>
			<artifactId>log4j</artifactId>
			<version>1.2.16</version>
		</dependency>         
	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.apache.maven.plugins</groupId>
				<artifactId>maven-compiler-plugin</artifactId>
				<configuration>
					<source>1.6</source>
					<target>1.6</target>
				</configuration>
			</plugin>
			<!-- As we are doing "inplace" GWT compilation, ensure the widgetset -->
			<!-- directory is cleaned properly -->
			<plugin>
				<artifactId>maven-clean-plugin</artifactId>
				<version>2.4.1</version>
				<configuration>
					<filesets>
						<fileset>
							<directory>src/main/webapp/VAADIN/widgetsets</directory>
						</fileset>
					</filesets>
				</configuration>
			</plugin>
			<plugin>
				<groupId>org.apache.maven.plugins</groupId>
				<artifactId>maven-war-plugin</artifactId>
				<version>2.2</version>
				<configuration>
					<failOnMissingWebXml>false</failOnMissingWebXml>
				</configuration>
			</plugin>
			<plugin>
				<groupId>com.vaadin</groupId>
				<artifactId>vaadin-maven-plugin</artifactId>
				<version>${vaadin.plugin.version}</version>				
			</plugin>
			<plugin>
				<groupId>org.mortbay.jetty</groupId>
				<artifactId>jetty-maven-plugin</artifactId>
			</plugin>
		</plugins>
		<pluginManagement>
			<plugins>
				<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/mytheme/styles.scss</argument>
				                </arguments>
				            </configuration>
				        </execution>
				    </executions>
				</plugin>
				<!--This plugin's configuration is used to store Eclipse m2e settings only. It has no influence on the Maven build itself.-->
				<plugin>
					<groupId>org.eclipse.m2e</groupId>
					<artifactId>lifecycle-mapping</artifactId>
					<version>1.0.0</version>
					<configuration>
						<lifecycleMappingMetadata>
							<pluginExecutions>
								<pluginExecution>
									<pluginExecutionFilter>
										<groupId>com.vaadin</groupId>
										<artifactId>
											vaadin-maven-plugin
										</artifactId>
										<versionRange>
											[7.1.3,)
										</versionRange>
										<goals>
											<goal>resources</goal>
											<goal>update-widgetset</goal>
											<goal>compile</goal>
										</goals>
									</pluginExecutionFilter>
									<action>
										<ignore></ignore>
									</action>
								</pluginExecution>
							</pluginExecutions>
						</lifecycleMappingMetadata>
					</configuration>
				</plugin>
			</plugins>
		</pluginManagement>
	</build>
</project>

what’s missing?
I can’t even to compile my .scss with Eclipse Plugin; I obtain this message “Select a theme file (.scss) or a Vaadin project to compile”
Thanks

2

Your web.xml has the parameter productionMode=true which mean the servlet won’t automatically compile the theme for each user individually (this would lead to incredibly bad performance in production). Use the vaadin:compile-theme in Maven to compile the theme.

3

Ok, but I want to disables the debug window.

4

This works for me! Thanks!

5
6

Hello,

So are you using ivy or maven to manage your project dependencies? In general you should have ivy.xml OR pom.xml in your project, not both. Sounds a bit problematic setup to me.

Related to the message you see in logs: You are running in production mode so Vaadin does not do automatic theme recompilation (see Artur’s post above).

Have you tried compiling the theme using maven? (mvn clean install or mvn vaadin:compile-theme in the project root folder?)

Cheers,
Matti

7
8

How to Chage style.css in theme ? when i change it , i use command mvn clean install in terminal , so after i lost everything that chaged. please help me !!!

9

In Vaadin 7 the files to modify are typically the ones that end with .scss.

To get started, just create a new vaadin project using the plugin or one of the maven archetypes and have a look at all the files in the theme folder. One of the .scss files should indicate clearly, where to put your own style rules.

When the theme is compiled (when you run mvn clean install), the compiler will generate the styles.css file for you. If you have an old one, that will be overwritten. Thus, no point trying to modify that one.