search

vuejs / vue-loader

📦 Webpack loader for Vue.js components
MIT License
4.99k stars 915 forks source link

Scoped CSS Not Being Applied To HTML Elements #2008

Open jwbats opened 2 years ago

jwbats commented 2 years ago

Version

17.0.0

Reproduction link

github.com

Steps to reproduce

Run project, inspect HTML to see that red and green CSS borders aren't applied to divs from the vue template.

What is expected?

Scoped styling correctly applied.

What is actually happening?

Injected CSS is scoped, but the HTML elements aren't. Therefore, the scoped CSS isn't applied to the HTML elements.

I'm not sure if this is a vue-loader bug, or a bug somewhere else, or a webpack misconfigure on my part. More details on this SO thread.

jwbats commented 2 years ago

This was caused by a missing external in webpack.config.js.

externals: {
    vue: 'Vue'
}
jwbats commented 2 years ago

@alexander-akait From the css-loader repo, where I also posted this issue, feels that it should work, even without the external Vue declaration.

Maybe this is a bug after all.

Why do I need an external Vue declaration for CSS scoping to work. And why does it almost-completely work without the external declaration? Why no warnings or errors?

Can someone from vue-loader comment on this?