Using Sass in Hippo

[Luke McDowell]

I worked out how to integrate Sass into my Hippo 12.1 project and thought I would share the steps for anyone else. Any thoughts or improvements are welcome.

To begin I create two new directories:

/myhippoproject/repository-data/webfiles/src/main/resources/site/css

/myhippoproject/repository-data/webfiles/src/main/resources/site/scss

The Sass templates go in the scss directory. You can use subfolders.

Now update the POM file here:

/myhippoproject/repository-data/webfiles/pom.xml

Under project > build > plugins add:

      <plugin>
        <groupId>nl.geodienstencentrum.maven</groupId>
        <artifactId>sass-maven-plugin</artifactId>
        <version>2.20</version>
        <executions>
          <execution>
              <id>generate-css-using-sass</id>
              <goals>
                  <goal>update-stylesheets</goal>
              </goals>
          </execution>
        </executions>
        <configuration>
          <sassSourceDirectory>${basedir}/src/main/resources/site/scss</sassSourceDirectory>
          <destination>${basedir}/src/main/resources/site/css/</destination>
        </configuration>
      </plugin>

The next time you run mvn verify the build process will scan for .scss files in the scss directory and write them to the css directory with the exact same subfolder structure.

To have your Sass files automatically processed while you are developing locally you can run the project then open a separate terminal window and run the following commands:

cd /path/to/myhippoproject/repository-data/webfiles

mvn sass:watch

You can view more options for the Sass Compiler Plugin on their homepage.

Hope this helps.

[Jeroen Hoffman]

Nice one, thanks for sharing!

Did you prevent the scss sources to be imported into the repository? See Excluded Directories at [1]

Jeroen

[1] https://www.onehippo.org/library/concepts/web-files/web-files-configuration.html 

--
Hippo Community Group: The place for all discussions and announcements about Hippo CMS (and HST, repository etc. etc.)
 
To post to this group, send email to hippo-community@googlegroups.com
RSS: https://groups.google.com/group/hippo-community/feed/rss_v2_0_msgs.xml?num=50
---
You received this message because you are subscribed to the Google Groups "Hippo Community" group.
To unsubscribe from this group and stop receiving emails from it, send an email to hippo-community+unsubscribe@googlegroups.com.
Visit this group at https://groups.google.com/group/hippo-community.
For more options, visit https://groups.google.com/d/optout.

[Luke McDowell]

I hadn't thought about it but that makes sense Jeroen. Thanks.

[Luke McDowell]

One question I have on this, is it possible to add the Sass watch process to startup? So as part of initiating:

mvn -Pcargo.run

we could get the watch that happens with:

cd /path/to/myhippoproject/repository-data/webfiles
mvn sass:watch

without having to open a new tab.

[Виктор Червоный]

definiteky agree

среда, 20 декабря 2017 г., 11:23:06 UTC+2 пользователь jeroen.hoffman написал:

To post to this group, send email to hippo-c...@googlegroups.com

RSS: https://groups.google.com/group/hippo-community/feed/rss_v2_0_msgs.xml?num=50
---
You received this message because you are subscribed to the Google Groups "Hippo Community" group.

To unsubscribe from this group and stop receiving emails from it, send an email to hippo-communi...@googlegroups.com.