Ionic 5 experiences issues with loading customized SCCS components

Question

I recently crafted a personalized feature in ionic 5, following these steps:

Step 1: Initiate the component using

ionic g component components/FlashCard

Step 2: Develop a module for this specific component. Use

ionic g module components/FlashCard

Step 3: Integrate FlashCardComponent into the flash-card.module.ts file.

Step 4: Import FlashCardModule into the necessary page's module.ts file.

You can find these detailed instructions here: Ionic 4 custom components

The custom scss code within the component looks like this:

.ios, .md {
    flash-card {
        /* CSS properties and values */
    }
}

Below is the example of how I insert the custom component on my desired page:

<app-flash-card>
    <div class="flash-card-front">FRONT</div>
    <div class="flash-card-back">BACK</div>
</app-flash-card>

After executing ionic serve, I noticed that my scss styling wasn't applied although there were no errors visible in the Chrome dev tools.

Is there a way to enable and activate the custom styling for my component effectively?

UPDATE:

flash-card -> app-flash-card

Answer 1

Answer №1

The name of your component is app-flash-card, but in your scss file, it is declared as flash-card. Updating it might resolve the issue:

 .ios, .md {

    app-flash-card {

I checked the tutorial and found some errors. I made some corrections here and there, and here is the link to the updated stackblitz

Essentially, you need to change this part:

 .ios, .md {

    flash-card {

to:

:host {

Answer 2

The name of your component is app-flash-card, but in your scss file, it is declared as flash-card. Updating it might resolve the issue:

 .ios, .md {

    app-flash-card {

I checked the tutorial and found some errors. I made some corrections here and there, and here is the link to the updated stackblitz

Essentially, you need to change this part:

 .ios, .md {

    flash-card {

to:

:host {