How to Fix the Required $level and $color Parameters Warning in Webpack When Using Material Components Web

Recently while using the Material Components Web components in an Aurelia 2 application with Sass, I encountered an annoying issue where a warning would appear in my app. The warning appears to be harmless, but it’s annoying.

The error appears as:

Module Warning (from ./node_modules/sass-loader/dist/cjs.js): both $level and $color are required; received $level: ‘0’, $color: "

To fix it in Webpack, you can use the warningsFilter argument for stats to filter it out:

stats: {
      warningsFilter: /both \\$level and \\$color are required;/,
    },

This filters out the warning.