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.css
← Minified 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