Basic Gulp-Based SASS Build Process
In order to use SASS in your WordPress development environment, download this zip archive.
When you unpack the archive, you will have a folder called gulp-dev-for-wp. Inside that folder are two files: package.json and gulpfile.js.
This build process assumes that either:
- you have installed npm and gulp-cli on your own computer, or
- you are on a lab computer and have changed the npm global install location and installed gulp-cli
It also assumes that you have put into wp-content/themes:
- an underscores-based starter theme, or
- a theme with a “sass” folder at the top level, with a style.scss file inside it
Copy this downloaded folder (gulp-dev-for-wp) into your wp-content/themes folder. Do not put it into into your theme folder. Rather, put it in the same folder that holds your theme folder.
Edit the file gulpfile.js: change the value of the first variable to match the exact folder name of your theme.
Then, in the command line navigate into this folder (gulp-dev-for-wp). An easy way is to type cd and then drag the folder into the terminal window.
Run this command: npm install
Once the required modules install, run this command: gulp watch
Now, every time you make an edit to a sass file or partial, the sass compilation process will reoccur.