Minify CSS with Node-sass

In the node-sass documentation says you have to use --output-style, and it could be nested | expanded | compact | compressed. To minify use compressed

For example:

node-sass -w public/css/scss/style.scss public/css/style.css --output-style compressed

will minify the CSS.


Since LibSass and Node Sass are deprecated
use the Dart-SASS package: npm install --save-dev sass

package.json

{
  "scripts": {
    "scss": "sass --style=compressed --watch src/scss:public/css"
  },
  "devDependencies": {
    "sass": "^1.32.7"
  }
}

To run it and watch changes to files, run in terminal:

npm run scss 

given a folder structure like:

🗎︎ package.json
📁︎ public
📁︎ css
  🗎︎ style.cssMinified and compressed
📁︎ src
📁︎ scss
   🗎︎ style.scss


node-sass supports outputting minified CSS with the --output-style parameter.

outputStyle

  • Type: String
  • Default: nested
  • Values: nested, expanded, compact, compressed

After installing the node-sass npm package. I added the build-css line to my package.json file.

  "scripts": {
    "build-css": "node-sass --include-path scss scss/main.scss   public/css/main.css --output-style compressed",
  },

Then I simply need to type npm run build-css for the content inside my /scss/main.scss file to be transformed into compressed (minified) css inside the /public/css/main.min.css

More information can be found within the node-sass Github repo's documentation here https://github.com/sass/node-sass#outputstyle