CODEWITHSUNDEEP
sassionic4
Niraj Pandey
Niraj Pandey

Reputation: 329

Ionic4 build error: Undefined SCSS variable in page.scss

I created a blank Ionic4 app and in the src/global.scss, I declare a variable $padding: 16px. I then tried to use the $padding in an element in home.page.scss as follows:

.highlight {
  padding: $padding;
}

I expected it to output the following as it does in Ionic3:

.highlight {
  padding: 16px;
}

Instead in Ionic4 I am getting an undefined variable on the $padding during the build process. Can we not use global SCSS variables within the page styles anymore or am I missing something obvious here?

Upvotes: 1

Views: 265

Answers (1)

Prashant Gupta
Prashant Gupta

Reputation: 796

You need to import the global.scss file in your page.scss file to get it work

@import '../../global.scss';

Since global.scss already include for the project. So the solution is that you make a new file common.scss and import it inside page.scss with

@import '../../common.scss';

And inside common.scss you can type 

$padding: 16px

Upvotes: 3

Related Questions