Webpack 5 mini-css-extract-plugin dropping scss files

Question

I am migrating a webpack config from webpack 4 and am trying to wire in the mini-css-extract-plugin. However, all of my first party app CSS (SCSS) is not being injected into the main app.css file after extraction. If I inspect the file received by the browser, I see the stubs where the css should be included, but it's not there.

You'll see above this line is a 3rd party CSS block that is included.

This is what my SCSS loader config looks like:

    {
        test: /\.scss$/i,
        use: [{
          loader: MiniCssExtractPlugin.loader, // extract css into files
        }, {
          loader: 'css-loader',
        }, {
          loader: 'resolve-url-loader',
        }, {
          loader: 'sass-loader',
          options: {
            sourceMap: true, // <-- !!IMPORTANT!
            additionalData (source, loaderContext) {
              // All scss files ending with _library.scss
              // will not re-import additionalData
              if (loaderContext.resourcePath.endsWith('_library.scss')) {
                return source
              }

              // this is the first time, add the imports
              return '@use \'~@/assets/css/_library\';'
            }
          }
        }, {
          loader: 'sass-resources-loader',
          options: {
            resources: require(path.join(process.cwd(), 'src/assets/css/scssUtils.js'))
          }
        }]
      }

Anyone run into this issue before? I'm at my wits end.

score 0 · Answer 1 · answered Sep 22 '22 at 13:43

This was because of the block in the additionalData configuration. My logic in there was incorrect, and basically returning an empty block instead of the content inside the file.

My solution was to eliminate it all together and just @use _library.scss in the files where it was appropriate, not every single scss file.

Webpack 5 mini-css-extract-plugin dropping scss files

1 Answers1