SCSS Not working

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


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


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;


You must import your file to theme

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

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

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?

Sorry, it works, thank you!!!