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.

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

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"  },  "dependencies": {    "npm": "^6.13.1"  },  "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.css ← Minified and compressed
📁︎ src
 📁︎ scss
   🗎︎ style.scss}