How to include Angular Material styles in Sonarque?

Question

I want Sonarqube to analyse my Angular application based on Angular Material.
There is this kind of styling :

.some-class {
    mat-icon {
        color: red;
    }
}

Since Angular Material is globally included through configuration in angular.json, Sonarqube seems to be unable to see mat-icon and shout out a bug :

Unexpected unknown type selector "mat-icon"

Is there a workaround ? a configuration ?

Answer 1

You can avoid the "unknown type selector". You have to change the quality profile of the rule (like CSS in this case), in order to do that you must have admin access to sonarqube.

1. Browse to quality profiles --> CSS, and then on the gear icon right of Sonar Way select Extend
2. Then browse to the rules, search the rule you want to customize, and you’ll have a change button that will allow you to customize selectors, ignoring types with a regex.

See there: https://community.sonarsource.com/t/how-to-change-css-rule-selectors-should-be-known/31912