1

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

Sai Manoj
  • 3,809
  • 1
  • 14
  • 35

1 Answers1

2

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";
michelnem
  • 104
  • 4
  • Actually when I used sass,I used to import all the `scss` files to one `main.scss` and will convert that to css using `"watch:sass": "node-sass sass/main.scss css/style.css -w"` inside script in `package.json`. In ionic and angular that doesn't work in that way? – Sai Manoj Dec 30 '19 at 15:31
  • This is what i mean https://stackoverflow.com/a/17599322/9380480 – Sai Manoj Dec 31 '19 at 06:38
  • 1
    @SaiManoj component in angular are encapsulated which means you can't. – michelnem Dec 31 '19 at 08:03
  • Thanks.Got this cleared. So now if I remove ```styleurl``` in my ts then it works – Sai Manoj Dec 31 '19 at 08:09
  • 1
    @SaiManoj you could remove the styleUrl, import everything into main styles.scss and use global styles for the application but then you will lose angular functionality like **:host{}**, try combain both of the methods. – michelnem Dec 31 '19 at 09:45
  • Thanks mate, you have cleared all my queries. Accepted and up-voted your answer. – Sai Manoj Dec 31 '19 at 09:48