Vue 3 / Webpack 5 Boilerplate Code Not Applying CSS Scoping

Question

I'm migrating from my Vue 2 / Webpack 4 setup to Vue 3 / Webpack 5.

Here's my boilerplate code on GitHub, so far. It's a VS.NET project, making use of NPM Task Runner to watch and auto-transpile my vue files.

It works for the most part, save for the fact that the CSS isn't properly scoped. It does scope the injected CSS (with attributes such as 'data-v-37bfa8da'), but it doesn't apply this scoping to the HTML elements.

Ergo, the CSS isn't applied at all.

It does get applied when I leave out the 'scoped' attribute in my .vue file's CSS. But then my CSS is global: not scoped at all. But on production, you really do need automated CSS scoping.

I've tried the most often suggested fixes on SO (link 1, link 2), but nothing works:

• set esModule to false in css-loader
• replace vue-style-loader by style-loader
• add '*.vue' to the sideEffects prop in package.json

The first suggestion is currently applied in the GitHub repo's source. The others are not.

Another person, outside of SO, showed me a working setup where he used esbuild-loader. I tried this. Also doesn't work for me.

All packages are up to date. So is my NodeJS.

I don't have so much experience with Webpack. It could be any setting in any package. I could be searching for an answer for a long time.

Is there anybody on here more experienced in Webpack, who is able to find a solution to my problem more quickly?

Answer 1

The fix is to add Vue as an external to webpack.config.js.

externals: {
    vue: 'Vue'
}