Slow sass-loader Build Times with Webpack

I think there are a few issues:

1: It may be because you haven’t specified which files to test against (so webpack may be searching everything):

...
"test": {},
  "use": ["myApp/node_modules/mini-css-extract-plugin/dist/loader.js", {
   "loader": "css-loader"
}
...

try replacing test: {} with test: /\.(sa|sc|c)ss$/ or
test: /\.module.(sa|sc|c)ss$/ if using css modules

1b: try modifying the test key in other loaders too, e.g. babel usually only needs to look for js/ts(x) files so if that’s the case specify that.

1c: play around with the include/exclude properties too

2: You have 4 instances of css-loaders in that config – unless you are server side rendering you should only need two (one for sc/sa/css modules, one for normal sa/sc/ss)

here is a sample css loader config that I hope is helpful (hint: the way css wants to be loaded often differs per project so be sure to check the module options in webpack/css-loader documentation)

{
  test: /\.(sa|sc|c)ss$/,
  use: [
    {
      loader: MiniCssExtractPlugin.loader,
      options: {
        esModule: true,
        modules: {
          namedExport: true,
        },
      },
    },
    {
      loader: 'css-loader',
      options: {
        sourceMap: !isProd,
        importLoaders: 2,
        esModule: true,
        modules: {
          auto: true,
          namedExport: true,
        },
      },
    },
    {
      loader: 'postcss-loader',
      options: {
        sourceMap: !isProd,
      },
    },
    {
      loader: 'sass-loader',
      options: {
        sourceMap: !isProd,
      },
    },
  ]
}

gotchas: webpack loaders are processed in reverse, so for this sample config the order of processing is sass -> postcss -> css -> minicss

Unfortunately there is rarely a straightforward/direct answer for css issues with webpack, it takes a bit of digging into the docs and figuring out which options are needed for your project.