Understanding the Ionic SCSS setup

In this section, we will take a look at how Ionic SCSS is set up.

If you look at the scaffolded project structure, you will see an scss folder, which consists of the ionic.app.scss file. For customizing the default Ionic theme, you should override the variable here, and here only. If you are planning to have multiple themes, I recommend using theme1.scss, theme2.scss, and so on files inside the scss folder.

Do remember that any of the theme files should have the following two lines:

// The path for our ionicons font files, relative to the built CSS in www/css
$ionicons-font-path: "../lib/ionic/fonts" !default;

// Include all of Ionic
@import "www/lib/ionic/scss/ionic";

In a typical theme file, the first section overrides SCSS variables. The second section loads Ionic core SCSS files; finally we override the generated classes.

The Ionic core SCSS files refer to the following two statements:

$ionicons-font-path: "../lib/ionic/fonts" !default;
@import "www/lib...