Simple SCSS + Autoprefixer Setup

Gifford Nowland
2 min readOct 20, 2020

--

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! :)

--

--

Gifford Nowland

Programmer. Engineering Section Manager @ The Aerospace Corporation. If I can’t find a solution, I write one.