Overriding Sass variables independently in a page

Short description of the problem:

I don’t success to override Sass variables. Issue very close to issue #7500

What behavior are you expecting?

I expect to change the color of a tab bar by updating the Sass variable in my page scss file. But updating $tabs-md-background did not change anything.

Steps to reproduce:

1. put the line “$tabs-md-background: red;” into the scss file of a page: nothing change
2. put the @import “app.core” at the beginning of app.ios.scss, app.md.scss and app.wp.scss: it works. But I guess it is an huggly solution.

Same behavior for the line: “$toolbar-inactive-color: red;”

Which Ionic version Ionic 2

Run ionic info from terminal/cmd prompt: (paste output below)

You have been opted out of telemetry. To change this, run: cordova telemetry on. 6.3.0 Gulp version: CLI version 3.9.1 Gulp local: Local version 3.9.1 Ionic Framework Version: 2.0.0-beta.11 Ionic CLI Version: 2.0.0-beta.37 Ionic App Lib Version: 2.0.0-beta.20 OS: Windows 7 SP1 Node Version: v4.4.7

---

Dependency warning - for the CLI to run correctly, it is highly recommended to install/upgrade the following:

Please install your Cordova CLI to version >=4.2.0 npm install -g cordova

---

Thank you by advance for your help,

Olivier.

[kolayrandevu]

I have the exact same problem.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.