https://github.com/kottenator/node-sass-watcher
SCSS watcher with post-processing
https://github.com/kottenator/node-sass-watcher
Last synced: about 1 year ago
JSON representation
SCSS watcher with post-processing
- Host: GitHub
- URL: https://github.com/kottenator/node-sass-watcher
- Owner: kottenator
- License: mit
- Created: 2017-01-10T01:17:18.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2018-02-01T02:03:40.000Z (over 8 years ago)
- Last Synced: 2025-03-30T06:51:16.362Z (about 1 year ago)
- Language: JavaScript
- Size: 83 KB
- Stars: 8
- Watchers: 1
- Forks: 4
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# node-sass-watcher
[](https://travis-ci.org/kottenator/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
```sh
npm install node-sass-watcher
```
## Usage: CLI
```sh
node-sass-watcher src/input.scss -o dist/output.css -c 'node-sass | 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's `stdin`
* `` will be replaced with the input file path
* `` 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 [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`.
```js
// watch-it.js
var fs = require('fs');
var sass = require('node-sass');
var postcss = require('postcss');
var autoprefixer = require('autoprefixer');
var Watcher = require('node-sass-watcher');
// Input variables
var inputFile = process.argv[2];
var outputFile = process.argv[3];
var supportedBrowsers = process.argv[4];
// Options
var watcherOptions = {
verbosity: 1,
}
// Renderer
function render() {
console.warn('Rendering "' + inputFile + '" file...');
sass.render({file: inputFile}, function(err, result) {
if (err) {
console.error('Error: ' + err.message);
return;
}
var processor = postcss([
autoprefixer({
browsers: supportedBrowsers.split(/,\s*/g)
})
]);
console.warn('Processing with Autoprefixer for browsers: ' + supportedBrowsers);
processor.process(result.css.toString()).then(
function(result) {
console.warn('Outputting to "' + outputFile + '" file...');
fs.writeFile(outputFile, result.css);
},
function(err) {
console.error('Error: ' + err.message);
}
);
});
}
// Start watching
var watcher = new Watcher(inputFile, watcherOptions);
watcher.on('init', render);
watcher.on('update', render);
watcher.run();
```
Run your custom script:
```sh
node watch-it.js src/input.scss dist/output.css "ie >= 9, > 1%"
```
Available options are a subset of the CLI options:
* `includePaths`
* `rootDir`
* `verbosity`
* `includeExtensions`
## Collaboration
Feel free to create a ticket or a pull-request ;)