The Dart Sass --watch flag (short -w) acts like --update: it compiles outdated stylesheets once, then stays open and recompiles whenever those files or their dependencies change. Ideal while you edit SCSS locally.
Watch a single file pair or a whole folder with colon syntax. Pair with the rest of the Dart Sass CLI. Stop the process with Ctrl+C.
Per the Sass docs: Sass watches directories you pass on the command line, parent directories of filenames you pass, and load paths — not extra folders discovered only through @use / @import / @forward.
In folder mode, files starting with _ are not emitted as CSS outputs, same as a normal directory compile.
Use --watch while coding. For production builds, run a one-shot compile (often with --style=compressed) without watching.
# One file
sass --watch input.scss output.css
# Folder pair (many-to-many)
sass --watch themes:public/css
sass -w app/sass:public/stylesheets
# Network / virtual drives
sass --watch --poll themes:public/css
# One-shot outdated only (no stay-open)
sass --update themes:public/cssPattern: pick file or folder targets → add --watch → leave the terminal open → save SCSS → read the compile log.
Core watch-related shapes:
| Command / flag | Meaning |
|---|---|
--watch / -w | Compile, then keep rebuilding on change |
sass --watch in.scss out.css | Watch one input → one output |
sass --watch src:css | Watch a folder pair; skip _ partials |
--poll | Timer-based checks (only with --watch) |
--update | Rebuild outdated files once, then exit |
--style=compressed | Still applies on every watch rebuild |
--load-path / -I | Extra folders Sass also watches for changes |
| Ctrl+C | Stop the watcher process |
Commands match the Dart Sass CLI docs. Open View Typical Log for sample terminal output.
From the Sass guide: watch input.scss and write output.css.
sass --watch input.scss output.cssoutput.css.input.scss triggers another compile.Watch app/sass and emit CSS under public/stylesheets.
sass --watch app/sass:public/stylesheetssass -w app/sass:public/stylesheets.--pollUse when native file watchers miss updates on network or virtual disks.
sass --watch --poll themes:public/css--poll only works together with --watch.sass:watch ScriptShare one command with your team via package.json.
# package.json → "sass:watch": "sass --watch scss:css"
npm run sass:watchsass locally so the binary resolves.Combine watch with formatting flags while still auto-rebuilding.
.button {
padding: 0.5rem 1rem;
background: #036;
color: #fff;
&:hover { background: #024; }
}sass --watch --style=compressed scss:dist/css--style applies on every rebuild.--watch.Most --watch bugs are unwatched folders, missing poll, or leaving the process in CI.
Shared token folders used only via @use need to be on the command line or a --load-path.
Add --poll. Do not pass --poll without --watch.
Watch never exits on its own. Use a one-shot sass / --update build step instead.
Changing _tokens.scss rebuilds files that load it — but no _tokens.css is written.
--watch is a Dart Sass CLI feature (since 1.6.0). Prefer Dart Sass for all new watch workflows.
| Implementation | Status |
|---|---|
| Dart Sass | --watch since 1.6.0; --poll since 1.8.0 |
| Ruby Sass | Had watch historically — now EOL (legacy notes) |
| LibSass / node-sass | Deprecated toolchain — migrate to Dart Sass |
| Browsers | N/A — they only see compiled CSS |
Confirm with sass --version. Pair watch with the rest of the Dart Sass CLI options.
--watch compiles once, then rebuilds on save.src:css colon map.--poll when OS watchers miss network/VM saves.One line: --watch keeps Sass compiling while you edit — save SCSS, get fresh CSS.
Conceptual watch loop:
1. Resolve file / folder targets (and load paths)
2. First pass like --update (compile outdated sheets)
3. Register watchers (or start --poll timer)
4. On change: recompile affected stylesheets
5. Keep logging until Ctrl+C stops the processLegacy CLI reference only — then migrate fully to Dart Sass.
8 people found this page helpful