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

1. yarn watch — watches src/style.scss compiles, prefixes, and outputs to style.css on change
2. yarn build — compiles, prefixes, and outputs src/style.scss to style.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:

1. Autoprefixer (`autoprefixer`)
2. Chokidar (`chokidar-cli`)
3. Node SASS (`node-sass-chokidar`)
4. 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! :)