Running Sass in a repeatable way: npm scripts, watch mode, and source maps so you can debug compiled CSS without guessing which SCSS file produced a rule.
sass package (Dart Sass)
Install the official compiler locally with npm init -y then npm install sass --save-dev.
Add scripts to package.json:
/* package.json scripts */
"scripts": {
"scss:build": "sass scss/main.scss css/main.css --style=compressed",
"scss:watch": "sass scss/main.scss css/main.css --watch",
"scss:dev": "sass scss/main.scss css/main.css --watch --source-map"
}Run npm run scss:dev while you work. The CSS file updates when you save a partial.
Source maps
Source maps link compiled CSS to SCSS. Enable in dev with sass scss/main.scss css/main.css --source-map or the scss:dev script above.
DevTools shows the original SCSS file and line when you inspect an element. Disable or strip maps in production builds if your deploy policy requires it – many teams ship maps privately or omit them.
Output styles
expanded– readable CSS, good for learning and debugging.compressed– minified, good for production.
You can use different scripts for dev and prod builds.
Multiple entry points
Admin and public skins? Compile separately in one script: sass scss/main.scss:css/main.css scss/admin.scss:css/admin.css --style=compressed.
Editor integration
VS Code’s Live Sass Compiler can compile on save without npm – fine for solo learning. Teams usually standardise on npm scripts so CI and every machine run the same command. Pick one approach per project and document it in the README.
CI check
Add a dry compile in CI so broken SCSS fails the build: scss:check running sass scss/main.scss css/main.css --no-source-map --fatal-deprecation.
Commit compiled CSS only if your deploy expects it. Many pipelines compile on deploy instead.
Try it
- Add
sassand watch/build scripts to a test project. - Turn on source maps and trace one rule from browser DevTools back to SCSS.
- Run a compressed build and compare file size to expanded output.