Prevent webpack inserting css into DOM when require()

Question

I'm facing a tricky situation where I want Webpack to compile SCSS files but I don't want it to insert into the DOM when I call require().

I have a Nuxt project where I created a custom iframe component and I want to apply a stylesheet to it. I had Webpack setup with the following loaders to compile SCSS into separate CSS files.

{
  test: /\.extract.scss$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[contenthash].css',
      }
    },
    'extract-loader',
    'css-loader',
    'sass-loader',
  ]
}

The ideal way it would work is in the iframe component I call require('/path-to/some.extract.scss') to get the url, then manually create and insert the stylesheet link to the iframe header, so that the CSS only take effects in the iframe.

But what happens is that after requiring it, it automatically inserts the style tag into the top level window.

I have tried using the flag emitFile:false for file-loader, but then it wouldn't output the compiled css file which results a 404 when I link it in the iframe.

I tried giving the file a static output name then reference that directly, which works but I'm afraid that everytime I make changes to some.extract.scss and end users would still be using the old cached file.

I also tried removing the .css extension in the output file name. Which works wonders but I feel like it's a hack.

If anyone could offer any insights would be very much appreciated.