Compilation
In this lesson, we'll learn how to setup a compilation script and run our watch script to check for file changes.
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.
Get hands-on with 1400+ tech skills courses.