Ionic4 build error: Undefined SCSS variable in home.page.scss

Ionic Framework
1

I created a blank Ionic4 app and within it, in the src/global.scss I declare the following $padding: 16px. I then try 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 I am getting an Undefined variable. during the build process. Can we not use global SCSS variables within the page styles anymore?

2

Ionic 4 is based on CSS4 variables.

or the doc

or

1 Like
3

The better answer is probably the one mentioned by @reedrichards but if anyone needs to still access the SCSS variable, the way I did was to create a file, I called it common.scss and only include SASS variables, mixins and functions in it by importing or directly adding into the file. Then finally, importing it on any *.page.scss file.

1 Like