Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Extracted CSS is loaded all together #3943

Closed
manniL opened this issue Sep 23, 2018 · 28 comments
Closed

Extracted CSS is loaded all together #3943

manniL opened this issue Sep 23, 2018 · 28 comments
Labels
2.x pending triage waiting for dependency

Comments

@manniL
Copy link
Member

manniL commented Sep 23, 2018 •
edited

Version

v2.0.0

Reproduction link

https://codesandbox.io/s/github/manniL/nuxt-extract-css-include-bug/tree/master/

Steps to reproduce

  1. Clone repo
  2. npm i
  3. npm run build && npm start
  4. open localhost:3000/ and localhost:3000/other

What is expected ?

  • localhost:3000/ -> Green background but no red color
  • localhost:3000/other -> No Green background but no red color

What is actually happening?

The CSS of both pages is loaded together.
When using scoped styles, the CSS doesn't overlap but is still loaded (which harms perf if you have a lot of components/CSS).

This bug report is available on Nuxt community (#c7805)
@pimlie
Copy link

pimlie commented Sep 23, 2018

Does it also happens if you add a scoped tag?

@manniL
Copy link
Member Author

manniL commented Sep 23, 2018

@pimlie Good point! Will try 🤔

@manniL
Copy link
Member Author

manniL commented Sep 23, 2018

@pimlie Well, the styles don't interfere then anymore but CSS is still loaded (which was the "main point" here 🙈 )

@mauxtin
Copy link

mauxtin commented Sep 26, 2018

I am actually having the same problem :/ Have anyone figured this out?

@manniL
Copy link
Member Author

manniL commented Sep 26, 2018 •
edited

@mauxtin The only workarounds are scoped styles or not extracting at the moment.

@stale
Copy link

stale bot commented Oct 31, 2018

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

@stale stale bot added the stale label Oct 31, 2018
@manniL
Copy link
Member Author

manniL commented Nov 1, 2018

Not stale ⛔️

@stale stale bot removed the stale label Nov 1, 2018
@nmfzone
Copy link

nmfzone commented Nov 18, 2018 •
edited

Do you have a solution for this issue? @manniL

Btw, this is only happening when using extractCss to true. Because css extracted into individual .css file. When it's set to false, the css just pushed into <head>, on the correct page.

@manniL
Copy link
Member Author

manniL commented Nov 18, 2018

@nmfzone This depends on https://github.com/webpack-contrib/mini-css-extract-plugin as #4219

@nmfzone
Copy link

nmfzone commented Nov 18, 2018

Whoops, same problem? Ok, nice one. Let's see how it goes 👍

@Avcajaraville
Copy link

I can confirm Im having the same problems.

I filled issues on here and here but no luck so far :(

This is breaking all our deployments at the moment...

@manniL
Copy link
Member Author

manniL commented Nov 19, 2018

@Avcajaraville A workaround would be not using extractCSS for now :|

@Avcajaraville
Copy link

@manniL and what would you recommend as an alternative?

@manniL
Copy link
Member Author

manniL commented Nov 19, 2018

As I said above: Not extracting CSS.

@nmfzone
Copy link

nmfzone commented Nov 19, 2018

carbon
My configuration right now :|

@manniL
Copy link
Member Author

manniL commented Nov 19, 2018

@nmfzone any particular reason you’d need to extract it?

@Avcajaraville
Copy link

@manniL I would say probably caching issues is the biggest one.

We dont wanna put all our modules/routes css in a style tag. Depending on the view it can be quite big.

@manniL
Copy link
Member Author

manniL commented Nov 19, 2018

@Avcajaraville You can completely cache the component files which include the CSS. If you build it up modularly as well (moving component CSS into component files via <style> tags) you'll also only load what's needed.

@Avcajaraville
Copy link

I don't think I quite understand you. To be honest, I came across this issue from mini css, but not using nuxt.

I found out I can have the css in js, but thats not satisfing for us, as we need CSS independent from JS (so JS is not needed to browse our site). The only solution so far, is to inject all the CSS into a style tag, which is impossible to cache, isn't?

Is there anything Im missing ?

Thanks a lot for your time and answers :)

@manniL
Copy link
Member Author

manniL commented Nov 19, 2018

@Avcajaraville Oh, I see, wasn't aware of that :| In this case, you'll likely have to wait for a fix.

@chentianyuan
Copy link

same issue here

1 similar comment
@lizm-21
Copy link

lizm-21 commented Nov 28, 2018

same issue here

@manniL manniL mentioned this issue Nov 28, 2018
Closed
@jochouen
Copy link

jochouen commented Nov 29, 2018 •
edited

@manniL
Use hooks to remove unwanted css. What do you think of it?
I tried it and did it.
May be not a good idea.

@manniL
Copy link
Member Author

manniL commented Nov 29, 2018

@jochouen can you share your code for that?

It might affect perf but it could be a "workaround"

@jochouen
Copy link

jochouen commented Nov 30, 2018 •
edited

@manniL

hooks: {
 generate: {
  page(generate) {
    const cheerio = require('cheerio'),
          doc = cheerio.load(generate.html); 
          htmlPath = generate.path.replace('.html', '');
    doc('link[rel=stylesheet]').filter(function() {
       if (doc(this).attr('href').indexOf('pages') > 0 && doc(this).attr('href').indexOf(htmlPath) < 0) {
        doc(this).remove().html();
       }
    })
    generate.html = doc.html();
  }
 }
}

before:
test.html

<link rel="stylesheet" href="/_nuxt/css/app.css">
<link rel="stylesheet" href="/_nuxt/css/pages/index.css">
<link rel="stylesheet" href="/_nuxt/css/pages/test.css">
<link rel="stylesheet" href="/_nuxt/css/pages/users/_id.css">
<link rel="stylesheet" href="/_nuxt/css/pages/users/top.css">

after:
test.html

<link rel="stylesheet" href="/_nuxt/css/app.css">
<link rel="stylesheet" href="/_nuxt/css/pages/test.css">

@fe-shinemo
Copy link

my test, with vue 2.5.19 (2.5.18) released, this bug has been fixed already, @manniL

@manniL
Copy link
Member Author

manniL commented Dec 10, 2018

@fe-shinemo Indeed. Updated the example and it's working now

@manniL manniL closed this as completed Dec 10, 2018
@lock
Copy link

lock bot commented Jan 9, 2019

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@lock lock bot locked as resolved and limited conversation to collaborators Jan 9, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
2.x pending triage waiting for dependency
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
10 participants
@manniL @pimlie @Avcajaraville @lizm-21 @nmfzone @jochouen @chentianyuan @danielroe @mauxtin @fe-shinemo