Our great sponsors
-
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
Bootstrap
The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
Similar to the compile-styles script, the css-minify script is also quite long and contains many parameters. More info on all the parameters can be found at the clean-css-cli GitHub repo. The parameters being passed in indicate to run clean-css with a certain level of optimization, line break formatting, and to include source maps with the optimized output. The file to optimize is the styles.css file located in the dist folder that was generated by the compile-styles command, and the optimized output will be written to styles.min.css in the same folder. Now that all the required scripts have been added to the package.json file we can first compile, and then minify the scss source, by running the command npm run compile-styles followed by the command npm run css-minify. Then looking in the dist folder that was created there should be four files:
Unfortunately, multi-line npm scripts are not supported so the script is quite long, and there are quite a few parameters passed. Luckily the node-sass command line documentation can provided detailed info on all of the possible parameters that are supported.
There are many different ways to compile SCSS, one of the two syntaxes supported by SASS. In this post we will explore the utilization of the node-sass npm package. We'll also look at how we can use the clean-css npm package to minify and optimize the generated output after compiling SCSS into CSS. Both of these techniques are similar to how Bootstrap handles the compilation and minification of its SCSS files. Please make sure you have Node.js and npm installed first.