Add sass to stylePreprocessorOptions in legacy :browser builder

[earshinov]

Command

build

Description

References:

• feat(@angular/build): add sass to stylePreprocessorOptions in application builder #28627
• Karma builder: support sass in stylePreprocessorOptions with "builderMode: application" #29185
• add sass to stylePreprocessorOptions in browser-esbuild for V19 #29014

Similarly to the situation @TokenR1ng described, we cannot migrate to the new :application builder. And we would still like to employ stylePreprocessorOptions.sass.silenceDeprecations (#28627 (comment)) to avoid spam, while using the old builder.

Describe the solution you'd like

Port the change implemented in #28627 to the legacy :browser builder.

Describe alternatives you've considered

Continue suffering hundreds and thousands of lines of sass warnings in ng build that obscure real issues.

[earshinov]

Requests for this made earlier by other users:

• add sass to stylePreprocessorOptions in browser-esbuild for V19 #29014 (comment) (@TokenR1ng)
• Karma builder: support sass in stylePreprocessorOptions with "builderMode: application" #29185 (comment) (@TokenR1ng)
• Karma builder: support sass in stylePreprocessorOptions with "builderMode: application" #29185 (comment) (@Squixx)

[alan-agius4]

@earshinov, what is stopping you from migrating to the application builder?

[earshinov]

@alan-agius4 , I think last time I checked it didn't work for us under Yarn PnP. I haven't noticed any news regarding Yarn PnP lately, so I am assuming this setup remains broken. Should I check again?

[alan-agius4]

Yarn PNP should work, AFAIK there isn’t an open issue regarding this when using the application builder.

[earshinov]

Thanks! I will check it again then (this or next week).

Update: Turned out that the problem was in the custom Webpack configuration that we have. I will try the custom-esbuild builder, which I see is now available, but it will take more time.

[alan-agius4]

OOC, what are you doing that required a custom webpack confirmation?

[earshinov]

@alan-agius4 , stuff piled up over the years. Here are some excerpts:

function addWebpackBundleAnalyzerPlugin(config) {
  config.plugins.push(new BundleAnalyzerPlugin({
    analyzerMode: 'static',
    reportFilename: path.join(BASE_DIR, 'webpack-bundle-analyzer-report.html'),
    openAnalyzer: false,
  }));
}


function removeMomentJsLocales(config) {
  // References:
  // - https://github.com/angular/angular-cli/issues/6137#issuecomment-419822929
  // - https://github.com/moment/moment/issues/2373#issuecomment-372771788

  //config.plugins.push(new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /en-us/));

  // Rather, ignore all locales
  // https://webpack.js.org/plugins/ignore-plugin/#example-of-ignoring-moment-locales
  config.plugins.push(
    new webpack.IgnorePlugin({
      resourceRegExp: /^\.\/locale$/,
      contextRegExp: /moment$/
    })
  );
}


// https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md#option-1-using-the-monaco-editor-webpack-plugin
function addMonacoPatch(config) {
  config.module.rules.push(
    {
      test: /\.css$/,
      include: [/monaco-editor/],
      use: ['style-loader', 'css-loader']
    },
    {
      test: /\.(mp3|wasm|ttf)$/i,
      type: 'asset/resource'
    }
  );

  config.module.parser.javascript.url = true;
  config.resolve.extensions.push('.ts', '.js', '.json', '.ttf');
  config.resolve.fallback = { path: require.resolve('path-browserify') };
}

And we also inject string-replace plugin to apply some patches to generated CSS.

The above is the majority of our customizations.