Skip to content
This repository has been archived by the owner on Apr 6, 2023. It is now read-only.

fix(webpack): set extractCSS: true by default #4388

Merged
merged 5 commits into from
Jun 13, 2022
Merged

Conversation

danielroe
Copy link
Member

πŸ”— 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.

@danielroe danielroe added bug Something isn't working webpack ❗ p4-important Priority 4: bugs that violate documented behavior, or significantly impact perf labels Apr 15, 2022
@danielroe danielroe requested a review from pi0 April 15, 2022 22:06
@danielroe danielroe self-assigned this Apr 15, 2022
@netlify
Copy link

netlify bot commented Apr 15, 2022

βœ… Deploy Preview for nuxt3-docs canceled.

Name Link
πŸ”¨ Latest commit 70f4794
πŸ” Latest deploy log https://app.netlify.com/sites/nuxt3-docs/deploys/62a7195ed43b900009770a2f

@pi0 pi0 added the pending label Apr 22, 2022
@pi0
Copy link
Member

pi0 commented Apr 22, 2022

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

@danielroe
Copy link
Member Author

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?

@pi0 pi0 merged commit 4fdea30 into main Jun 13, 2022
@pi0 pi0 deleted the fix/webpack-extract-css branch June 13, 2022 12:52
@pi0 pi0 mentioned this pull request Jun 13, 2022
@syifeng
Copy link

syifeng commented Oct 29, 2022

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

Copy link
Member Author

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.)

@danielroe danielroe added the 3.x label Jan 19, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
3.x bug Something isn't working ❗ p4-important Priority 4: bugs that violate documented behavior, or significantly impact perf pending webpack
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants