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?

@tony19 No, I'm not. This is a vue project about 4 years old that has been upgraded, piecemeal, several times. :) — ebbishop
– ebbishop, Commented Feb 25, 2021 at 14:01

hurradieweltgehtunter · Accepted Answer · 2021-10-04 12:38:49Z

3

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'
    ]
},

answered Oct 4, 2021 at 12:38

hurradieweltgehtunter

313 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ebbishop · Accepted Answer · 2021-02-25 16:11:11Z

0

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.

edited Feb 25, 2021 at 16:11

answered Feb 25, 2021 at 14:26

ebbishop

2,0132 gold badges24 silver badges55 bronze badges

Collectives™ on Stack Overflow

Vue scoped styles: webpack 5 & css-loader 4

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related