Now that we are aware of where and how the Ionic SCSS framework is set up, we will come up with a workflow that we can use while working with SCSS in an Ionic project.
The steps are as follows:
Set up Ionic SCSS.
Open the
scss/ionic.app.scssfile.Add/update the variables you want to override before you import the Ionic SCSS framework.
Add the required fonts before you import the Ionic SCSS framework.
Add/override pre-defined classes or create new classes after the Ionic SCSS framework is imported.
So, a typical customized ionic.app.scss looks like this:
// Override or add variables $positive: teal; $custom: #aaa; // add custom button variables $button-custom-bg: $custom !default; $button-custom-text: #eee !default; $button-custom-border: darken($custom, 10%) !default; $button-custom-active-bg: darken($custom, 10%) !default; $button-custom-active-border: darken($custom, 10%) !default; // define the ionic fonts path $ionicons-font-path: "../lib/ionic/fonts" !default; // import...