Cannot inherit ionic global class

Issue

I am trying to inherit .ion-padding-vertical in a component CSS class.

I tried importing the global SASS file (/src/global.scss) file, but it didn't work. I also tried importing the specific file ~@ionic/angular/css/padding.css as it is done by the global SASS file. However, the compiler cannot find .ion-padding-vertical class.

Here is my file.

my.component.scss

@import "../../../global.scss";

.my-class {
  @extend .ion-padding-vertical;
}

Is it possible to inherit an Ionic global CSS class? Thanks.

Solution

.ion-padding-vertical is not a class that you can change and also it is not declared in global.scss. it is a built-in class. you can check it by searching that class through the project directory to see there is no result. but if you put your self written class in global.scss you can extend it anywhere. (also you can extend classes that already exist in global.scss). you also don't need to import anything anywhere. just write your class at the end of global.scss and then use it with @extend in your component.scss

Answered By - MahdiJoon