SPFx Exception – gulp bundle – The build failed because a task wrote output to stderr

Problem Statement:
Recently when I was doing a gulp bundle –ship after making a lot of changes (specifically introduced a new custom scss file), I received the exception that

The exception on the cmder was as below. And the bundle was not created, so that I couldn’t proceed with the package-solution as well.

Then, when tried to do the gulp build, I could see a specific warning. The warning is something like

Solution/Workaround:

Now, either we need to fix the warning or find a workaround for this. The fix is to rename the file as <>.module.scss, so that the SPFx will not overridden. But considering the timeline, the workaround could be, add the below line to the gulpfule.js.

The complete gulpfile.js will be as shown below.

'use strict';
const gulp = require('gulp');
const build = require('@microsoft/sp-build-web');

build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);

build.addSuppression(`Warning - [sass] src/webparts/../Productstyles.scss: filename should end with module.sass or module.scss`);

build.configureWebpack.mergeConfig({
    additionalConfiguration: (generatedConfiguration) => {
        if (build.getConfig().production) {
            var basePath = build.writeManifests.taskConfig.cdnBasePath;
            if (!basePath.endsWith('/')) {
                basePath += '/';
            }
            generatedConfiguration.output.publicPath = basePath;
        }
        else {
            generatedConfiguration.output.publicPath = "/dist/";
        }
        return generatedConfiguration;
    }
});
build.initialize(require('gulp'));

Now, we haven’t actually fixed the exception, but for the time being, we suppressed the warning and proceeded to take the build and package the solution.

Happy Coding
Sathish Nadarajan