SCSS scope

Ionic Framework ionic-v3
1

I have a page (Page A) with a ion-select with images.

HTML Code Page A

              <ion-label stacked>Cultivo</ion-label>
              <ion-select [(ngModel)]="todas" formControlName="producto" (ionChange)="onSelectChangeProd($event)">
                <ion-option *ngFor="let p of jsonproductos" value="{{p.id}}">
                    {{p.nombre}}
                </ion-option>
              </ion-select>

SCSS Code Page A

    .alert-radio-icon{
        border-radius: 0 !important;
        border: none !important;
        height: 40px !important;
        width: 40px !important;
        background-size: 40px 40px !important;
        background-repeat: no-repeat;
    }

    [id^="alert-input-"][id$="0"] .alert-radio-icon{
        background-image: url("../../assets/imgs/cultivos/1.png") !important;
    }
    [id^="alert-input-"][id$="1"] .alert-radio-icon{
        background-image: url("../../assets/imgs/cultivos/2.png") !important;
    }
    [id^="alert-input-"][id$="2"] .alert-radio-icon{
        background-image: url("../../assets/imgs/cultivos/3.png") !important;
    }    
    [id^="alert-input-"][id$="3"] .alert-radio-icon{
        background-image: url("../../assets/imgs/cultivos/4.png") !important;
    }
    [id^="alert-input-"][id$="4"] .alert-radio-icon{
        background-image: url("../../assets/imgs/cultivos/5.png") !important;
    }
    [id^="alert-input-"][id$="5"] .alert-radio-icon{
        background-image: url("../../assets/imgs/cultivos/6.png") !important;
    }    
    [id^="alert-input-"][id$="6"] .alert-radio-icon{
        background-image: url("../../assets/imgs/cultivos/7.png") !important;
    }    

    .alert-radio-inner{
        background-color: transparent !important;
    }

preview:
addcultivo

So, I need to repeat the ion-select with images in another page (Page B).

HTML Code Page B

              <ion-label stacked>Tipo de Evento</ion-label>
              <ion-select [(ngModel)]="todas" formControlName="tipo" (ionChange)="onSelectChangeEvento($event)">
                <ion-option *ngFor="let e of jsoneventos" value="{{e.id}}">
                    {{e.nombre}}
                </ion-option>
              </ion-select>

CSS Code Page B

    .alert-radio-icon{
        border-radius: 0 !important;
        border: none !important;
        height: 40px !important;
        width: 40px !important;
        background-size: 40px 40px !important;
        background-repeat: no-repeat;
    }
    
    [id^="alert-input-"][id$="0"] .alert-radio-icon{
        background-image: url("../../assets/imgs/eventos/1.png") !important;
    }
     [id^="alert-input-"][id$="1"] .alert-radio-icon{
        background-image: url("../../assets/imgs/eventos/2.png") !important;
    }
    [id^="alert-input-"][id$="2"] .alert-radio-icon{
        background-image: url("../../assets/imgs/eventos/3.png") !important;
    }    
    [id^="alert-input-"][id$="3"] .alert-radio-icon{
        background-image: url("../../assets/imgs/eventos/4.png") !important;
    }
     [id^="alert-input-"][id$="4"] .alert-radio-icon{
        background-image: url("../../assets/imgs/eventos/5.png") !important;
    }
    
    .alert-radio-inner{
        background-color: transparent !important;
    }

But when run, the Page A images list are showed on Page B. (???)

If I put the CSS inside the page B scope, nothing is shown.

If I put the CSS inside the page A scope, nothing is shown.

I need to understand the scope of css code.

Can you help me?

2

help please? I suck for weeks.

3

So all v3 apps will compile a css file that is global, so scope isn’t too much of an issue.

Could you provide a demo or something to look at? Maybe an example project posted to github.

4

Thanks por aswer.

The problem is that if I put the CSS code out of the scope of the page (in SCSS file), it applies to the ALL project, and I do not want that.

On the contrary, if I put the CSS code within the scope of the page (in SCSS file), it does not even apply to it.

If I define a custom class in the SCSS file associated with the tag, nothing happens.

the CSS code only works if it’s placed outside of page in SCSS file.

Example:

Works for ALL Page por the project:

page-my {

}

.alert-radio-icon{
    border-radius: 0 !important;
    border: none !important;
    height: 40px !important;
    width: 40px !important;
    background-size: 40px 40px !important;
    background-repeat: no-repeat;
}
.alert-radio-inner{
    background-color: transparent ;
}

Does not work for any page, even for page-my

page-my {

	.alert-radio-icon{
	    border-radius: 0 !important;
	    border: none !important;
	    height: 40px !important;
	    width: 40px !important;
	    background-size: 40px 40px !important;
	    background-repeat: no-repeat;
	}
	.alert-radio-inner{
	    background-color: transparent ;
	}

}

I just need that the overwritten classes apply only to one page, and not to the whole project as it happens.

Is this an Ionic issue?