title: Vue scoped styles: webpack 5 & css-loader 4
body: <p>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 <code>&lt;template&gt;</code> and <code>&lt;script&gt;</code> tags. A handful of my components use scoped styles: <code>&lt;style scoped&gt;</code>.</p>
  <p>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).</p>
  <p>My current configuration looks like this:</p>
  <pre class="lang-js prettyprint-override"><code>{
    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
  }
  </code></pre>
  <p>I've tried an assortment of changes:</p>
  <ul>
  <li>replace <code>vue-style-loader</code> with <code>style-loader</code></li>
  <li>add <code>esModule: false</code> to the options</li>
  <li>add <code>ident: 'css-loader-ident'</code> to the css-loader config (same level as <code>options</code>)</li>
  </ul>
  <p>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.</p>
  <p>Ideas?</p>