Question

Same css property getting repeated in the Inspect tab

0

there is one class defined only once in the theme/web/custom-variables.scss folder and the class is applied to a text box. changes are reflecting well in the browser but it getting repeated several times in the Inspect tab, Could anyone please suggest why this is happening and how to prevent this?

asked 2023-08-21

Kourab Patra

5 answers

Harry Yogi · Answer 1 · 2025-03-31

Ok, I think I managed to solve the issue in my application.

First, our problem was that we have added a UI resource package in our app.

Additionally, the contents of the custom-variables.scss in app Styling folder was moved to another variables.scss file inside our UI resource package. The custom-variables.scss now only imported the main.scss of our UI resource package. This was causing the issue ( as mentioned above, the custom-variables.scss in app Styling folder is loaded for every module by default )

The custom-variables.scss only needed to import our another variable.scss file in our UI resource package and the issue is now solved..

Robert Price · Answer 2 · 2023-08-21

Do you have .dashboardfont class set on multiple elements that are nested before you define your textbox? It looks like it has multiple matches hence it showing multiple times.

Harry Yogi · Answer 3 · 2025-02-13

I am having the same issue with my app, was a reason / solution found? Mx 10.18.0

Mohammed Alameri · Answer 4 · 2025-03-30

Check what are you importing in the file custom-variables.scss in app Styling folder, because this file is imported by default in all modules. Import in this file only the variables and your custom scss file import it in the main.scss

Anthony Delorie · Answer 5 · 2025-04-24

You guys were not unique to this other teams were seeing this