Version

12.2.0

Reproduction link

https://github.com/sqal/vue-loader-duplicate-css-repo

Steps to reproduce

• Clone repo
• npm install && npm run build && npm run serve
• Open devtools and check injected stylesheets in the head tag

What is actually happening?

As you can see there are two components used in my app - A and B which both includes 2 other components. All three components includes the same stylesheet file. The difference between A and B is that, component A imports css using SFC <style> tag and component B imports css in the script tag. Now when open devtools and look at the head tag you can see that 4 stylesheets have been injected into the DOM. There is only one stylesheet file with B.css and 3 the same stylesheets with A.css.

So my question is - is this a bug? or what exactly is happening here? Why there is a different behavior between importing css in the <style> tag and <script>` tag. And if i don't use ExtractTextPlugin in my project, how can I prevent duplicate css injection into the DOM? I would appreciate if someone could clarify this issue. Thank you