Minify CSS with Node-sass

Question

I'm using SCSS in my NodeJS project and have my script working to turn all my seperate SCSS files into a single CSS file using the following command

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

My only issue is that I also want the CSS file to be minified. Is this possible with Node-sass? The docs say there is an option for 'compact' but it doesn't seem to work when I try

node-sass -w compact public/css/scss/style.scss public/css/style.css

Thank you in advance for any help.

score 108 · Accepted Answer · edited Feb 19 '19 at 01:56

108

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.

edited Feb 19 '19 at 01:56

George Stocker

55,025
29
167
231

answered Nov 14 '16 at 16:03

vretamal

1,279
1
9
12

1

node-sass is now deprecated. Even though this was correct back in 2016, it is recommended to use the Dart-SASS package as Roko C. Buljan answered with. – dasper Mar 08 '21 at 05:42
@dasper not sure if node-sass is also deprecated, maybe it uses soon Dart Sass? – Timo Apr 05 '21 at 12:31
1

@Timo in https://github.com/sass/node-sass explicitly put this warning on top: Warning: LibSass and Node Sass are deprecated. While they will continue to receive maintenance releases indefinitely, there are no plans to add additional features or compatibility with any new CSS or Sass features. Projects that still use it should move onto Dart Sass. – vretamal Apr 07 '21 at 14:41

score 7 · Answer 2 · answered Apr 03 '19 at 06:33

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

Roko C. Buljan · Answer 3 · 2021-02-25T15:49:49.410

3

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}

edited Feb 25 '21 at 15:49

answered Feb 25 '21 at 15:43

Roko C. Buljan

164,703
32
260
278

Should be the updated accepted answer. – Timo Apr 07 '21 at 15:47

score -2 · Answer 4 · answered Mar 05 '20 at 20:08

-2

"scss": "node-sass --watch scss -o app/css" This work for me

answered Mar 05 '20 at 20:08

Omar Vega

7
3

although this compiles, this will not unfortunately "minify". for that you will need to make use of the `--output-style compressed` flag – Craig Wayne Jun 06 '20 at 13:11

Minify CSS with Node-sass

4 Answers4

Linked