Book Image

Learning Ionic

By : Arvind Ravulavaru
Book Image

Learning Ionic

By: Arvind Ravulavaru

Overview of this book

Table of Contents (19 chapters)
Learning Ionic
About the Author
About the Reviewers

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: