David Stockdale's Scrapcode

Compiling Understrap Styles

Edit: Find updated version here:

How To Compile Understrap Child 1.0.0

So if your anything like me you might have swapped themes to Understrap knowing only of CSS styling.

The documentation for Understrap is supremely unhelpful for people who have never heard of SASS or SCSS before.

Thus I have created a simple guide on how to compile styles for Understrap!

Set – Up

  1. Download and install Visual Studio Code from here.
  2. In the Left-hand Bar, open up the Extensions menu (Ctrl+Shift+X).
  3. Search for Live Sass Compiler by Ritwick Dey and Install.
  4. On the blue bar at the bottom of the window, there should now be an eye icon that says “Watch Sass”.
  5. Still on the Live Sass Compiler extension page, click the cog near the “disable” and “uninstall” buttons, and go to settings.
  6. In the “Live Sass Compiler” section, under “Format” there will be an option to change the “Settings.json” file.
  7. Change the “savePath” variable to wherever you wish the final CSS to export to and save (I just leave it as the default).
  8. In the “Gulp” section, turn on Gulp Auto Detect.
At this point your settings should look something like this.

Compiling

  1. Open the SCSS or SASS file you wish to compile (In Understrap’s case it should be “sass/theme/_child_theme_variables.scss”)
  2. Click the eye icon that says “Watch Sass” to compile.
  3. Once it has changed to “Watching Sass”, It has compiled. There should be an output window with details.
  4. You can either click it again to turn the extension off or leave it on. When you save the SCSS or SASS file after having made changes while the extensions is “Watching Sass” it will automatically compile it to CSS.

Overwriting Old CSS

If you did everything like I did then within “understrap-child\sass” you should find the CSS file “child-theme”.

  1. Copy this file to “understrap-child\css” overwriting the old file with the same name.
  2. Copy the same file (after renaming it “child-theme.min”) to “understrap-child\css” overwriting the old file with the same name.

Congratulations you have managed to do what in any other theme would have taken you 5 seconds!

Hopefully this guide helped.

It definitely helped me when I got someone else to figure out how to do it for me.

Leave a Reply