Getting warning messages : Warning - [sass] The local CSS class 'min-chart' is not camelCase and will not be type-safe

Question

I am using third party css in SPFx. When I am building it, SPFx is showing me lots of warning messages :

I am using Windows 10 / SPFx 1.11.0. Please let me know how to disable these warning messages.

Thanks, Gaurav Goyal

Answer 1

Resolution

You should either fix all warnings or if it's not possible, you can ignore them.

For that purpose, you should modify your gulpfile.js.

There is one out of the box build suppression method call in gulpfile. You can add your own one using the same build.addSuppression method.

The method also accepts regexp, which is very convenient for us. Just add

build.addSuppression(/Warning - \[sass\] The local CSS class/gi);

or

build.addSuppression(/Warning/gi);

to ignore all warnings.

However, it's not very convenient, because probably you still want to see some warnings. That's why a better idea would be ignoring some of them during the production bundle.

Modify your code a little bit:

let args = build.getConfig().args;
let isProductionBundle = args._.indexOf('bundle') !== -1 && (args.ship || args.production || args.p);

if (isProductionBundle) {
  build.addSuppression(/Warning - \[sass\] The local CSS class/gi);
  // OR
  build.addSuppression(/Warning/gi);
}

Source: https://spblog.net/post/2019/01/02/sharepoint-framework-development-some-gotchas-and-how-to-solve-them