Setup Node SASS Watch
The easiest way to turn SCSS into CSS.
If your a frontend web developer, then CSS is your bread-and-butter. For a long time, CSS is all us frontend devs had.
CSS is pretty limited. It lacks variables and functions which can be quite useful for styling the frontend of websites, especially useful when it comes to complex custom designs.
If you’re a developer like me, and you like to stay on the cutting edge (its not so cutting edge anymore) of Frontend development then Sass is what you want.
In order to use Sass you’re gonna need a way to convert it into CSS because browsers can’t read Sass.
This is where Node comes into it..
Use Node to compile SCSS to CSS and Watch SASS files for changes
Need a simple way to output css from Sass? One simple way is to do the following:
CD into your project directory and install sass
Install Node modules into your project
1
2
npm init
npm install sass
Configure SASS Watch with CSS output
Note that the output of these files is relative to the ‘package.json’ file
1
2
3
4
5
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"scss": "sass --watch scss/style.scss:assets/custom.css"
},
Example 2: Output css file into the same directory as your package.json file
Here we use a ‘.’ dot to output into the same folder as a package.json file. Which in my case is usually the theme root.
1
2
3
4
5
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"scss": "sass --watch scss/style.scss:."
},
Now, it’s execution time. In your project directory run the scss script.
1
npm run scss
Every time you save the style.scss
file it will compile to custom.css
the assets folder.