Compilation

Before beginning, make sure to have your SASS project directory open! Then, open your package.json file. This is the file that generates when you run npm init in your Sass project directory.

In package.json, add the following code:

"compile-sass": "node-sass sass/main.scss css/style.comp.css"

Your script should now be as follows:

"scripts": {
  "watch-sass": "node-sass sass/main.scss css/style.css --watch",
  "compile-sass": "node-sass sass/main.scss css/style.comp.css"
},

Remember we added the --watch flag previously, in the lesson How to Install and Configure SASS.

Now let’s ensure the compile is working:

In a terminal, open up to your Sass project folder and run:

npm run compile-sass

It should complete the render and output the style.comp.css file to your CSS folder.

We will run this task at the end of the project to complete our final build!

While we are developing the project, we run the watch task with:

npm run watch-sass

This tells the compiler to watch the source files for changes, and re-compile to CSS automatically, whenever you save your Sass files. Just be sure to keep the task running while you work!

In the next lesson, we’ll look at the concatenation process.