Minify CSS with Node-sass

Cssnode.jsMinifyNode Sass

Css Problem Overview


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.

Css Solutions


Solution 1 - Css

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.

Solution 2 - 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

Solution 3 - 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

Solution 4 - Css

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionMatt LeachView Question on Stackoverflow
Solution 1 - CssvretamalView Answer on Stackoverflow
Solution 2 - CssTidyDevView Answer on Stackoverflow
Solution 3 - CssRoko C. BuljanView Answer on Stackoverflow
Solution 4 - CssOmar VegaView Answer on Stackoverflow