Vue scoped styles: webpack 5 & css-loader 4

Question

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?

Answer 1

I have the same setup and thanks to you I figured it out :) In my case i just had to switch the order of the loaders:

{
    test: /\.(sa|sc|c)ss$/,
    use: [
        'style-loader',
        'css-loader',
        'sass-loader'
    ]
},

Answer 2

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.