How To Compile Understrap Child 1.0.0

If your anything like me you had to wrap your head around NPM just to compile an Understrap child theme.

Which made it very annoying when Understrap 1.0.0 came out and changed the compiling process.

To make it “easier”.

So I had to wrap my head around it all over again.

Thus I have once again created a simple step-by-step guide on how to do it.

Step 1: Download What You Need

First you’ll need to download Node.js before doing anything else.

Step 2: NPM Install

Next you need to open Terminal and navigate to the child theme.

If you have it in Downloads you can do this with the command:

cd Downloads\understrap-child-main

Or whatever your child theme is called.

Then you install NPM in this location with this command:

npm install

Step 2.1 NPM Troubleshooting

If at some point you get an error along the lines of this:

ENOENT, no such file or directory

Then follow these steps.

First clean the cache:

npm cache clean

Then input this command:

npm install -g npm

And finally re-install npm:

npm install

Step 3: Stylin’ & Compilin’

Now for the actual compiling of the styles.

Simply input this command:

npm run watch

And once npm has finished working any changes you make to “src\sass\theme\_child_theme_variables” will be compiled into css styles within the “css” folder.

My solution combines their new updated guide and an answer from stack overflow.

Because why would a guide have all the answers?

When you’re done close the terminal (the first time you click the “X” button the terminal will begin the process of ending the npm watching so wait for that to finish before attempting to close the terminal a second time).

Afterthought:

If you problems uploading/downloading the child theme look out for this:

Understrap 1.0.0 Slow Download