Run and compile sass scss file to css using node

  Today we learn how to use scss and generate css using node  or Run and compile sass scss file to css using node

  So please follow simple  steps :-

  Today we will create a project that can read scss file and generates css with it

 Note: Make sure you have installed node in your system. If you want to help to install node js based on your system then check our other tutorial or check node js official website.

Now create a blank folder and open  terminal(linux) or cmd(windows) and navigate to your current project folder by using cd command

Now run below command

npm init

after enter it will ask you some package info that you can fill according to you or just keep enter until it finished.
The above command will generate package.json file

Now  we will install npm module that will convert our scss to css

Run below command:

npm install node-sass

So we have installed node-sass package .

Now open package.json file in your editor and add below code into it into script object

"scss": "node-sass --watch scss -o css"

After adding above line your code will be look like this

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "scss": "node-sass --watch scss -o css"
}

and your package.json wil be look like this

{
  "name": "scss",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "scss": "node-sass --watch scss -o css"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "node-sass": "^4.13.0"
  }

}

Now create two folders scss and css and create a file styles.scss into scss folder and styles.css

After that your directory will be look like this
css
 - styles.css
node_modules
scss
 - styles.scss
package.json

Now run below command in your root directory

npm run scss

This command will watch our scss files changes and make generate css for it into styles.css file

Now open styles.scss file and styles.css file

Now add some scss code into styles.scss like below

$colortype : red;

.clr {

color: $colortype

} 

Files will be look like this

and after saving this file you can see your css file have css code for this scss dynamically so you dont need to run command again and again , now you can write your scss code and node will generate css code automatically.



Thanks for reading. Check other tutorials also.

Related Links
How to generate css from scss
Using node js create css and scss
Npm package to generate css files for scss file
How to generate css for scss files automatically
Use watchman for scss files
Simple tutorial of scss and css
How to work with scss
Simple steps to compile and run sass files