CONVERT SCSS FILES INTO ONE CSS FILE USING SCRIPT (Minified Version Included)
In this video we are performing a series of tasks on SCSS or SASS file and converting it into CSS and it's minified version using command line. This tutorial is about best SCSS to CSS converter via npm or NodeJS. You don't need a separate SCSS to CSS Compiler in order to use SASS with CSS. From code editor we can do it easily. First I will show you how to compile scss to css in visual studio code code editor. We need an extension called 'Live SASS Compiler'.
Make sure it's updated by going to change log and look at the update date. Then open SCSS file and hit watch SCSS button at the bottom of vscode. All SCSS files in project folder should be converted into CSS and their minified versions of CSS files. I have live sass compiler settings in user settings in code editor. My settings are to convert to CSS file and minified CSS file at the same time. So that's cool and all but let's do it via command line.
You should have NodeJS installed in system to convert SCSS into CSS via command line.
Open terminal program. I have Git for Windows.
Type npm init. Provide answers to questions and get the package.json file.
Install packages (sass postcss postcss-cli autoprefixer npm-run-all) as dev dependencies.
Create new scripts or commands in package.json file.
Here is what we are going to do.
First of all we will convert SCSS into CSS file
Then convert CSS into prefixed CSS to make CSS cross browser compatible
Then compress CSS into minified version
So From SCSS we will get CSS version and minified version of CSS
There is also node-sass package but for me it did not handle SASS use rule. So we are using sass package.
postcss-cli is needed. Without it autoprefixer will not work.
Next we created script and commands to do all that. I have also explained flags that we can use with different packages.
-u flag is short for -use
-b flag is short for build
-o flag is short for output file or output directory
and now if we use command:
npm run build
We will have CSS version of file, prefixed version of CSS and minified version of CSS file.
And if you want source map files, just remove --no-source-map from scripts.
So this is how you can convert SASS into CSS and minified CSS using command line.
00:00 INTRO
00:18 SCSS to CSS using Code Editor (Live SASS Compiler)
01:20 Preparing npm scripts / package.json file
01:44 Installing packages to process SCSS SASS CSS files
03:06 SCSS to CSS script
03:20 CSS to Prefixed CSS script
03:45 Prefixed CSS to minified CSS file script
04:03 Script to run all / get the output / CSS & min.css files
05:14 CSS Source maps
Thank You!
👍 LIKE VIDEO
👊 SUBSCRIBE
🔔 PRESS BELL ICON
✍️ COMMENT
Channel: / webstylepress
Website: https://www.webstylepress.com
FaceBook: / webstylepress
Twitter: / webstylepress
GitHub: https://github.com/webstylepress
#scss #css #npm #WebStylePress #sass #postcss #postcsscli #autoprefixer #script #webdevelopment
Watch video CONVERT SCSS FILES INTO ONE CSS FILE USING SCRIPT (Minified Version Included) online without registration, duration hours minute second in high quality. This video was added by user WebStylePress 02 June 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 6,780 once and liked it 33 people.