Minify CSS with Node-sass
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.
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"
},
"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