This is my go-to for quickly adding sass functionality to any WordPress theme. Just add the following package.json to your theme folder (assuming you already know how to run npm/node, and have them installed and ready to go):
// package.json file placed in your theme folder root
{
"name": "sass-compiler",
"version": "1.0.0",
"description": "Sass compiler using npm scripts",
"scripts": {
"sass:compile": "sass sass/theme.scss theme.css --style compressed",
"start": "chokidar \"sass/**/*.scss\" -c \"npm run sass:compile\""
},
"devDependencies": {
"chokidar": "^3.6.0",
"chokidar-cli": "^3.0.0",
"sass": "^1.75.0"
}
}You can grab the package.json code here. I always hate copying and pasting from things like the above. You never know how the formatting is going to come out. Alas, I digress…
Add all the sass you need via a folder named sass, whilst importing it all to your theme.scss. Running npm start will handle the rest, and compile your theme css file as you make changes. Just remember to add the new css file into your functions.php file of course!
This isn’t a foolproof quick sass setup for WordPress. But it’s a quick and dirty way of adding this functionality to a theme, for when you have the time for dealing with the details.
Extra functionality could be added for linting, handling scripts etc. This is just a basic boilerplate for a quick sass setup for WordPress projects. Now you can use Sass variables and all that fun stuff. Yay!
Now go forth and sass..