Setting up SCSS in our Ionic project

Now we will see how to set up SCSS in an existing Ionic project. We will start off by scaffolding a new tabs project. Create a folder named chapter4 and inside that open a new terminal/prompt and run:

ionic start -a "Example 13" -i app.example.thirteen example13 tabs

We can set up SCSS in our project in two ways:

• Manual setup

• Ionic CLI task

The manual setup

To set up SCSS manually, we will follow these steps:

1. Using the cd command, step into the example13 folder:

   cd example13
   

2. Install the required dependencies. The Ionic project that we scaffold from templates comes with a package.json file. This file already has all the dependencies needed to set up SCSS. Also, the project ships with a gulpFile.js, with the SCSS task defined, that watches for the changes in your SCSS files and builds the CSS file on-the-fly.

3. To set up these dependencies, run this:

   npm install
   

4. Also, if you did not install Gulp globally earlier, you can do so by running the following command:

   ...