Simple SCSS + Autoprefixer Setup
Simply need a SASS compiler and Autoprefixer watching for changes? Here’s a simple (one file) npm script setup.
I’m working on a project where I just needed a SASS compiler and Autoprefixer (my two must-have modern development conveniences) watching for changes.
Tools like Rollup, Parcel, Webpack, Gulp, Grunt, and Bower are great for complex projects, but I tire from the dependency soup that has underscored frontend development in the last 5 or so years. I think I’ve created a pretty elegant solution:
#package.json{
... Name, version, dependencies, etc. ...
"scripts": {
"watch": "chokidar ./src/**/*.scss --command 'node-sass-chokidar ./src/style.scss | postcss --use autoprefixer > ./style.css'",
"build": "node-sass-chokidar ./src/style.scss --output-style compressed --quiet | postcss --use autoprefixer --no-map > ./style.css"
},
"devDependencies": {
"autoprefixer": "latest",
"chokidar-cli": "latest",
"node-sass-chokidar": "latest",
"postcss": "latest",
"postcss-cli": "latest"
},
"browserslist": [
"> 1%",
"last 4 versions",
"not dead"
]
}
Scripts
yarn watch
— watchessrc/style.scss
compiles, prefixes, and outputs tostyle.css
on changeyarn build
— compiles, prefixes, and outputssrc/style.scss
tostyle.css
on demand
Autoprefixer uses the browserslist
defined in the package.json
.
Requirements
I was determined to include only the minimum number of packages necessary to turn an un-prefixed SASS file into prefixed CSS; in the end the project only requires 4 direct dependencies:
- Autoprefixer (`autoprefixer`)
- Chokidar (`chokidar-cli`)
- Node SASS (`node-sass-chokidar`)
- PostCSS (`post-css-cli`)
It requires no additional configuration files or unnecessary abstraction. Simple. Clean. Lightweight. Transparent.
If you know of a more elegant way please share in the comments! :)