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:

Using the cd command, step into the example13 folder:
```
cd example13
```
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.
To set up these dependencies, run this:
```
npm install
```
Also, if you did not install Gulp globally earlier, you can do so by running the following command...

Tech Concepts

Programming languages

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Learning Ionic

By : Arvind Ravulavaru

Learning Ionic

By: Arvind Ravulavaru

Overview of this book

Setting up SCSS in our Ionic project

The manual setup

Learning Ionic

By : Arvind Ravulavaru

Learning Ionic

By: Arvind Ravulavaru

Overview of this book

Setting up SCSS in our Ionic project

The manual setup

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access