sass variables aren't working in Ionic-4 while importing all the files at one place

Question

I have created a folder name variables inside the app. Inside the folder I have created my sass file named customColor.scss. So now in customColor.scss I have my colors posted below.

customColor.scss

$color-primary: #1706b3;
$color-primary-light: #393b8f;
$color-primary-dark: #28b485;
$color-secondary-light: #ffb900;
$color-secondary-dark: #ff7730;
$color-tertiary-light: #2998ff;
$color-tertiary-dark: #5643fa;
$color-grey-light-1: #f7f7f7;
$color-grey-light-2: #eee;
$color-grey-dark: #777;
$color-grey-dark-2: #999;
$color-grey-dark-3: #333;
$color-white: #fff;
$color-black: #000;

Now in my app.comoponent.scss I have imported all my internal folder scss files as below

@import "./variables/customColor.scss";
@import "./tab2/tab2.page.scss";
@import "./tab3/tab3.page.scss";

My custom color are working fine in tab2.page.scss but not working in tab3.page.scss. I'm getting the below error.

./src/app/tab3/tab3.page.scss
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

    background-color: $color-black;
                     ^
      Undefined variable: "$color-black".
      in D:\myApp\src\app\tab3\tab3.page.scss (line 44, column 23)

Note: It's working if I import my customColor.scss to tab3.page.scss. I'm completely new to Ionic, Angular and SASS.
Not able to understand that where does this goes wrong. Any leads or fixes? TIA

Answer 1

Each file is independent unit, which means each one have his own scope.

I don't know why tab2 is not throwing a compile error, but tab2 and tab3 is encapsulated from customColors which means you need to import customColors inside them.

customColor.scss

$color-primary: #1706b3;
$color-primary-light: #393b8f;
$color-primary-dark: #28b485;
$color-secondary-light: #ffb900;
$color-secondary-dark: #ff7730;
$color-tertiary-light: #2998ff;
$color-tertiary-dark: #5643fa;
$color-grey-light-1: #f7f7f7;
$color-grey-light-2: #eee;
$color-grey-dark: #777;
$color-grey-dark-2: #999;
$color-grey-dark-3: #333;
$color-white: #fff;
$color-black: #000;

tab2.page.scss

@import "../variables/customColor.scss";

tab3.page.scss

@import "../variables/customColor.scss";

maybe add globals.scss

@import "./variables/customColor.scss";
@import "./tab2/tab2.page.scss";
@import "./tab3/tab3.page.scss";

and then in app.comoponent.scss

@import "./customColor.scss";