Custom component sccs not loaded in ionic 5

Question

I have created a custom component in ionic 5 and this are the steps.

Step 1: Create a component ionic g component components/FlashCard

Step 2: Create a module for this component. ionic g module components/FlashCard

Step 3: Import FlashCardComponent to flash-card.module.ts file.

Step 4: Import FlashCardModule on the module.ts file of your desired page.

This is the post I took the steps from: Ionic 4 custom components

I have some custom sccs code in the component:

  .ios, .md {

    flash-card {

      

        /* entire container, keeps perspective */
        .flip-container {
            perspective: 1000px;
        }

            /* flip the pane when hovered */
            .flip-container.flipped .flipper {
                transform: rotateY(180deg);
            }

        .flip-container, .front, .back {
            width: 90vw;
            height: 40vh;
            margin: 20px auto;
        }

        /* flip speed goes here */
        .flipper {
            transition: 0.6s;
            transform-style: preserve-3d;

            position: relative;
        }

        /* hide back of pane during swap */
        .front, .back {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #ecf0f1;
            backface-visibility: hidden;
            -webkit-box-shadow: 0px 8px 4px -4px rgba(163,163,163,0.25);
            -moz-box-shadow: 0px 8px 4px -4px rgba(163,163,163,0.25);
            box-shadow: 0px 8px 4px -4px rgba(163,163,163,0.25);
            border: 1px solid #dee2e3;
            margin: 0;
            position: absolute;
            top: 0;
            left: 0;
        }

        /* front pane, placed above back */
        .front {
            z-index: 2;
            /* for firefox 31 */
            transform: rotateY(0deg);
        }

        /* back, initially hidden pane */
        .back {
            transform: rotateY(180deg);
        }

    }
}

And this is how I call the custom component in my desired page:

<app-flash-card>

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

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

</app-flash-card>

When I run ionic serve I don't see the style of my scss code. I get no error in my google chrome dev tools.

How can I activate my styling for my custom component?

UPDATE:

flash-card -> app-flash-card

eko · Accepted Answer · 2021-05-24T14:50:33.233

1

Your component is named app-flash-card but your scss file declares flash-card. So updating it might help:

 .ios, .md {

    app-flash-card {

Ok I looked at the tutorial and it's a bit wrong. I fixed the bits here and there and this is the fixed stackblitz

Basically change this part

 .ios, .md {

    flash-card {

to

:host {

edited May 24 '21 at 14:50

answered May 24 '21 at 14:10

eko

39,722
10
72
98

Hello @eko, Thanks for your time. I have updated my scss file but I don't see the styling. I will upload a screenshot. – Fearcoder May 24 '21 at 14:25
I don't see any matching styles in your scss and html. Your html has `flash-card-front` class but your scss don't – eko May 24 '21 at 14:26
I have followed this tutorial but this was based on Ionic 2 & 3 I have tried to convert this to Ionic 5: https://www.joshmorony.com/build-a-custom-flash-card-component-in-ionic-2/ – Fearcoder May 24 '21 at 14:30
I don't think you followed the tutorial correctly. I'll try to create a stackblitz so you can copy that – eko May 24 '21 at 14:35
The component is under `app/flash-card` and it's used in the home page under `pages/home/home.html` – eko May 24 '21 at 14:51

Custom component sccs not loaded in ionic 5

1 Answers1