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
Credits
Foreword
About the Author
Acknowledgments
About the Reviewers
www.PacktPub.com
Preface
Index

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:

    ...