fix(webpack): set extractCSS: true by default

[danielroe]

🔗 Linked issue

nuxt/nuxt#11986

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

vue-loader no longer supports extracting styles with vue-style-loader - see vuejs/vue-style-loader#56.

This PR removes the dependency and sets extractCSS to true by default (which is recommended in any case for production by webpack). If we are not able to inline styles then this is likely a better default, though it will be a breaking change when we re-introduce vue-style-loader later on.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[netlify]

✅ Deploy Preview for nuxt3-docs canceled.

Name	Link
🔨 Latest commit	70f4794
🔍 Latest deploy log	https://app.netlify.com/sites/nuxt3-docs/deploys/62a7195ed43b900009770a2f

[pi0]

pending: There is a chance we can fix the problem of CSS inlining.

[danielroe]

Looking at pi0/vue-loader@22894fe, this is not sufficient to enable us to inline styles, and we're already able to identify CSS files to preload when extractCSS is set to true. So I'm not sure what it would add. (Maybe it has been fixed upstream in vue-loader?)

I would suggest we merge this PR, as vite isn't inlining styles either. Then we can look to add a new feature to both vite + webpack later to inline critical CSS later on. wdyt @pi0?

[syifeng]

It's not worked when I used vite , I am confused

[danielroe]

Vite extracts CSS by default. You can turn off inlining styles by setting experimental.inlineSSRStyles to false in your nuxt config.

(In future please create a new issue rather than commenting on an old issue.)