SCSS Not working

Ionic Framework ionic-v3
1

I cannot seem to get tcss applied to my html, does anyone know what I am doing incorrectly please?

html

<div id="icon-image-{{item.id}}"><img class="icon" src="{{item.icon}}" height="75" width="75" /></div>

scss

img.icon {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

It doesn’t matter what I try, I cannot seem to get the style applied to the html element.

In the above example I want to make the image grey, but even if I do something simple like the following, it doesn’t get applied either.

img.icon {
    background-color: red;
}

Thanks

2

You must import your file to theme

3

Thanks xr0master, I don’t understand, can you give me an example please?

4

Open your app/theme/app.core.scss file and add something like this

@import "../pages/myinfo/personalprofile/personalprofile";

Here’s the full demo

1 Like
5

Hi gigocabrera,

Thank you for the advise, but it makes no difference, the css is still not applied to the element. Any ideas what I am doing wrong?

6

Sorry, it works, thank you!!!