javaSASS is a powerful and very popular language for writing CSS style sheets. This is how I’m using SASS in my Maven projects.
First, I change the extensions of .css files to .scss and move them from src/main/webapp/css to src/main/scss.
Then, I configure the sass-maven-plugin (get its latest versions in Maven Central):
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
<executions>
<execution>
<id>generate-css</id>
<phase>generate-resources</phase>
<goals>
<goal>update-stylesheets</goal>
</goals>
<configuration>
<sassSourceDirectory>${basedir}/src/main/scss</sassSourceDirectory>
<destination>${project.build.directory}/css</destination>
</configuration>
</execution>
</executions>
</plugin>
The SASS compiler will compile .scss files from src/main/scss and place .css files into target/css.
Then, I configure the minify-maven-plugin to compress/minify the style sheets produced by the SASS compiler:
<plugin>
<groupId>com.samaxes.maven</groupId>
<artifactId>minify-maven-plugin</artifactId>
<configuration>
<charset>UTF-8</charset>
<nosuffix>true</nosuffix>
<webappTargetDir>${project.build.directory}/css-min</webappTargetDir>
</configuration>
<executions>
<execution>
<id>minify-css</id>
<goals>
<goal>minify</goal>
</goals>
<configuration>
<webappSourceDir>${project.build.directory}</webappSourceDir>
<cssSourceDir>css</cssSourceDir>
<cssSourceIncludes>
<include>*.css</include>
</cssSourceIncludes>
<skipMerge>true</skipMerge>
</configuration>
</execution>
</executions>
</plugin>
Minified .css files will be placed into target/css-min.
The final step is to configure the maven-war-plugin to pick up .css files and package them into the final WAR archive:
<plugin>
<artifactId>maven-war-plugin</artifactId>
<configuration>
[..other configuration options..]
<webResources combine.children="append">
<resource>
<directory>${project.build.directory}/css-min</directory>
</resource>
</webResources>
</configuration>
</plugin>
That’s it.
