Compile Sass to CSS using npm. [ EASIEST WAY!! ]
17.1 هزار بار بازدید -
6 سال پیش
-
Hey there!In this video, I'll
Hey there!
In this video, I'll be showing you the quickest way to compile Sass to CSS using npm.
Step 1:
-- Make a sass folder with a .scss file inside that folder
-- Make a css folder with a .css file inside that file
-- Write all of your Sass to your .scss file
Step 2:
-- Open terminal
-- type npm init
-- type npm i node-sass --save-dev
// we do --save-dev to save it to our developer dependencies in package.json
Step 3:
-- go to package.json
-- make a "compile:sass" script
-- define the script as below:
"compile:sass": "node-sass sass/main.scss css/style.css"
//our sass/scss is our input file and the css/style.css is the output file where the scss is getting compiled to.
Step 4:
-- in the terminal type: npm run compile:sass
-- see your css file now. you'll see your new compiled code.
-- add a -w tag to the script definition so that when you're running compile:sass, it will keep updating the css file without you having to keep typing it in manually
"compile:sass": "node-sass sass/main.scss css/style.css -w"
This is the person who showed me how to do this but it's on a udemy course that costs money to see so thats why i put it on here:
https://www.udemy.com/advanced-css-an...
Thanks for watching. Please like, subscribe, and comment what else little tricks you would like to know. Have a good day and realize the only thing holding you back from being a trillionaire is you :).. you can do it.
My personal github: github.com/walkforr
In this video, I'll be showing you the quickest way to compile Sass to CSS using npm.
Step 1:
-- Make a sass folder with a .scss file inside that folder
-- Make a css folder with a .css file inside that file
-- Write all of your Sass to your .scss file
Step 2:
-- Open terminal
-- type npm init
-- type npm i node-sass --save-dev
// we do --save-dev to save it to our developer dependencies in package.json
Step 3:
-- go to package.json
-- make a "compile:sass" script
-- define the script as below:
"compile:sass": "node-sass sass/main.scss css/style.css"
//our sass/scss is our input file and the css/style.css is the output file where the scss is getting compiled to.
Step 4:
-- in the terminal type: npm run compile:sass
-- see your css file now. you'll see your new compiled code.
-- add a -w tag to the script definition so that when you're running compile:sass, it will keep updating the css file without you having to keep typing it in manually
"compile:sass": "node-sass sass/main.scss css/style.css -w"
This is the person who showed me how to do this but it's on a udemy course that costs money to see so thats why i put it on here:
https://www.udemy.com/advanced-css-an...
Thanks for watching. Please like, subscribe, and comment what else little tricks you would like to know. Have a good day and realize the only thing holding you back from being a trillionaire is you :).. you can do it.
My personal github: github.com/walkforr
6 سال پیش
در تاریخ 1397/10/17 منتشر شده
است.
17,117
بـار بازدید شده