node-sass-watcher
SCSS watcher with post-processing.
Why?
node-sass
has --watch
option but it doesn't allow post-processing of the compiled CSS.
The only way is to "watch" the generated CSS file with another watcher. It's not convenient.
node-sass-watcher
provides simple way to do SCSS watching with post-processing.
Install
npm install node-sass-watcher
Usage: CLI
node-sass-watcher src/input.scss -o dist/output.css -c 'node-sass <input> | postcss -u autoprefixer --autoprefixer.browsers="ie >= 9, > 1%"'
Note: You need to run node-sass
inside the post-processing command,
because I don't want to deal with all node-sass
CLI arguments.
In fact, current implementation is node-sass
-independent.
More about --command
(-c
):
- contents of the
input.scss
are passed to the command'sstdin
<input>
will be replaced with the input file path<output>
will be replaced with the output file path, provided with--output
(-o
) argument (if specified)- Shell syntax is allowed: pipes (
|
), FD redirects (> output.css
), etc
If there's no -o
specified, the command output will be printed to stdout
.
All CLI options:
Usage: node-sass-watcher <input.scss> [options]
Options:
-c, --command Pass a command to execute. Shell syntax allowed
-o, --output Output CSS file path
-r, --root-dir Directory to watch for addition/deletion of the files. Default: .
-I, --include-path Path to look for imported files. Use multiple if needed
-e, --include-extensions File extensions to watch. Default: scss, sass, css
-v, --verbose Verbosity level: from -v to -vvv
-h, --help Show help
-V, --version Show version number
Usage: JS
Example: node-sass
→ autoprefixer
.
// watch-it.js var fs = ;var sass = ;var postcss = ;var autoprefixer = ;var Watcher = ; // Input variablesvar inputFile = processargv2;var outputFile = processargv3;var supportedBrowsers = processargv4; // Renderer { console; sass;} // Start watchingvar watcher = inputFile;watcher;watcher;watcher;
Run your custom script:
node watch-it.js src/input.scss dist/output.css "ie >= 9, > 1%"
Collaboration
Feel free to create a ticket or a pull-request ;)