Nuxt.js: How does the nuxtjs website inline CSS on the server side?

[nallown]

Hi,

I'm in the middle of porting my Vue.js app to nuxt.js right now and I've ran into a issue. Can you help me out?

When my website is being loaded there is no CSS in document at all, so the server doesn't generate any CSS. All of the CSS is being generated by the browser which makes the page look weird when the JavaScript is still getting loaded on the client side.

I read about the CSS flash on here but I realised even when I ran the application in production mode using the npm run build command followed by npm run start, it still does the CSS flashing.

I want to know how I can change my Nuxt.js app so that the server inlines the CSS instead of the browser.

I looked at the nuxt.js website and it generates the CSS on the server side rather then client side. Can you please tell me how it does that so I can do that as well?

_{This question is available on Nuxt.js community (#c2686)}

[manniL]

Which browser do you use? It could be related to #2794 if you only see that glitch in Firefox

[nallown]

@manniL Chrome 65.0.3325.181. It's the latest version. I'm not getting it on the nuxt.js website though, only on my own site.

I ran the server in production mode locally using the npm run start command and I'm still getting my CSS injected on the client side rather then server side. Unlike the nuxt.js website which does it server side.

How can I get my server to inject the CSS instead of the client? Any ideas?

[manniL]

@nallown Hm.. alright.

Are you using extractCss?

Have you included your global css in the nuxt.config.js like in this example?

[nallown]

@manniL I'm not using extractCss no, am I supposed to use shouldPreload and that shouldPreLoad method?

and I am using a global css, its not getting rendered server side though. The document is still missing the css

I was following the wiki and it said that the flashing should go away in production. It hasn't mentioned anything about having to do any extra configuring for it to go away.

[manniL]

@nallown You don't need extra configuration usually. I'm not using shouldPreload or shouldPrefetch as well.

But you should include your global CSS in your nuxt config as in the linked example.

...
  css: [
  'bulma/css/bulma.css',
    '~/your/global/css-files.css'
],
...

[nallown]

@manniL I am using a global css, its not getting rendered server side though. The document is still missing the css.

[manniL]

Weird... :thinking: It shouldn't happen then.

Now you should provide as much information as possible :relaxed:
Nuxt version?
SSR, SPA or static/generate mode?
Are you using nuxt standalone or with express (or other backend frameworks)?

[manniL]

Solved by using:

...
build: {
  extractCSS: {
    allChunks: true
  }
},
...

[nallown]

Thanks again, you were a great help to me :) Closing this issue now since its been solved.

[martpie]

Any idea how to make this CSS load asynchronously? Like https://stackoverflow.com/questions/32759272/how-to-load-css-asynchronously#40314216

[manniL]

@martpie Please create a new issue as the topic is somewhat different from this one.

[nallown]

woops I don't remember opening this issue again, sorry guys I didn't mean to I think it was like a automatic thing or something, not sure.

[lock[bot]]

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.