61

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.

4 Answers 4

128

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.

3
  • 3
    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 8, 2021 at 5:42
  • @dasper not sure if node-sass is also deprecated, maybe it uses soon Dart Sass?
    – Timo
    Apr 5, 2021 at 12:31
  • 2
    @Timo in 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 7, 2021 at 14:41
11

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

8

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

0
-2

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

1
  • 2
    although this compiles, this will not unfortunately "minify". for that you will need to make use of the --output-style compressed flag Jun 6, 2020 at 13:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.