Scoped CSS Not Being Applied To HTML Elements

[jwbats]

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]

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

externals: {
	vue: 'Vue'
}

[jwbats]

@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?