SASS Build Chain

It is possible to enable Syntactically Awesome Style Sheets(SASS) build chain in your sapi-nt application and automatically compile your scss files into css stylesheets. Follow the steps below to do just that.

Configuration

First thing to do is add sass-maven-plugin to your application’s pom.xml. As seen below:

<build>
    <plugins>
        ...
        <plugin>
            <groupId>nl.geodienstencentrum.maven</groupId>
            <artifactId>sass-maven-plugin</artifactId>
            <version>3.7.2</version>
            <executions>
                <execution>
                    <phase>generate-resources</phase>
                    <goals>
                        <goal>update-stylesheets</goal>
                    </goals>
                    <configuration>
                        <sassSourceDirectory>${project.basedir}/src/main/resources/public/sass</sassSourceDirectory>
                        <destination>${project.basedir}/src/main/resources/public/css</destination>
                        <sassOptions>
                            <always_update>true</always_update>
                        </sassOptions>
                    </configuration>
                </execution>
            </executions>
        </plugin>
        ...
    </plugins>
</build>

The sassSourceDirectory property points to the directory holding the sass files, by default that is under src/main/resources/public/sass. You will need to create this directory as it is not created automatically by the sapi-nt-archetype. You are also welcome to use a different location that might be more convenient to your project.

You can override the default stylesheets provided by the sapi-nt by creating stylesheets with the same file names under the src/main/resources/public/css directory. The default stylesheets can be found here. You change the the destination property to anywhere under src/main/resources/public directory since that is where all the static content is served from.

To load your stylesheets into pebble templates use <link rel="stylesheet" media="all" href="/path/to/your/stylesheet" /> tag where the stylesheet path is relative to the /public directory. The resourceRoot pebble variable is the location from which sapi-nt serves static resources.

Additional options that you might find useful are all documented on the sass-maven-plugin:update-stylesheets documentation pages. The plugin also supports additional goals such as scss-lint and watch, all documented on the plugin documentation pages.

Building your application

Command line interface

If you are packaging your application through a command line interface using a mvn package command then your stylesheets will be automatically generated and added to the jar every time you package your application. This is because generate-resources phase at which sass-maven-plugin compiles your stylesheets happens prior to the package phase.

IntelliJ IDEA

If you are running your application through IntelliJ IDEA you will need to edit the Run Configuration to include maven generate-resources prior to the IntelliJ Build command in order to (re)generate your stylesheets. This can be done by selecting the Run menu followed by Edit Configurations.... In a pop-up window, on the left hand side, select your main class and on the right hand side, under Before launch: Maven Goal, Build, Activate tool window click on the plus icon and select Run Maven Goal. In the Run Maven Goal pop-up window make sure that Working directory points to the root of your project and specify generate-resources under the Command line, then press OK. Now you need to move the newly created entry above the default IntelliJ Build goal to make sure the resources are generated before IntelliJ builds and runs the application. You can do so by selecting the newly created maven goal and pressing the up arrow from the menu located above the list of goals.