config sass-loader for angular9 with @angular-builders/custom-webpack

webpack.config.js

// steps:
//
// [1] install @angular-builders/custom-webpack
//
// [2] update angular.json for custom webpack configuration
//
// "architect": {
//   "build": {
//     // "builder": "@angular-devkit/build-angular:browser",
//     "builder": "@angular-builders/custom-webpack:browser",
//     "options": {
//       "customWebpackConfig": {
//         "path": "./webpack.config.js"
//       },
//    ...
// and
// "serve": {
//   // "builder": "@angular-devkit/build-angular:dev-server",
//   "builder": "@angular-builders/custom-webpack:dev-server",
//    ...

const path = require('path')
const webacpk = require('webpack')
const pkg = require('./package.json')

module.exports = (config, options) => {
  config.module.rules.forEach(rule => {
    // Add sass-loader option "prependData"
    // Inject global scss config files automatically
    if (rule.test.test('.scss')) {
      rule.use.forEach(useItem => {
        if (typeof useItem === 'object' &&
          useItem.loader.indexOf('sass-loader') !== -1) {
          useItem.options = useItem.options || {}
          useItem.options.prependData = `
            @import "src/scss/variables.scss";
            @import "src/scss/mixins.scss";
          `
          useItem.options.sassOptions = useItem.options.sassOptions || {}
          useItem.options.sassOptions.includePaths = [
            path.resolve('src/scss')
          ]
        }
      })
    }
  })
  return config
}

Hey @tenthree
Can you please suggest, how to replace and use the fast-sass-loader instead of saas-loader in the same style? https://www.npmjs.com/package/fast-sass-loader

Maybe this article works for you?
https://rhum1-dev.medium.com/angular-10-how-to-optimize-scss-compilation-826ac5cc7ba3