CODEWITHSUNDEEP
vue.jswebpacksasswebpack-5mini-css-extract-plugin
gabaum10
gabaum10

Reputation: 3827

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

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.

enter image description here

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.

Upvotes: 0

Views: 406

Answers (1)

gabaum10
gabaum10

Reputation: 3827

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.

Upvotes: 0

Related Questions