Vue scoped styles: webpack 5 & css-loader 4

I am in the process of upgrading a Vue app to webpack 5 and css-loader 4 (or 5). I use single-file components with <template> and <script> tags. A handful of my components use scoped styles: <style scoped>.

Since upgrading to webpack 5 and css-loader 4, scoped styles from my vue components have been entirely skipped by webpack (as far as I can tell).

My current configuration looks like this:

{
  module: {
    rules: [
      // ... other rules omitted here
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          {
            loader: 'css-loader',
            options: { modules: true }
          },
          'sass-loader'
        ]
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          {
            loader: 'css-loader',
            options: {
              // enable CSS Modules
              modules: {
                // customize generated class names
                localIdentName: '[local]_[hash:base64:8]'
              }
            }
          }
        ]
      },
    ]
  }
  // ... more configuration here
}

I've tried an assortment of changes:

• replace vue-style-loader with style-loader
• add esModule: false to the options
• add ident: 'css-loader-ident' to the css-loader config (same level as options)

So far I have not gotten a webpack config that will inject the styles into the final markup, much less with the vue-component-specific hash.

Ideas?

It turns out that the solution, or one possible solution, is the following:

{
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
}

I found this mostly by trial & error. More info about what's going on/why this works would be welcome.