Nuxt.js: CSS in HEAD tag

Created on 29 Mar 2017 · 4Comments · Source: nuxt/nuxt.js

Hello, if I want separate css files after generate not in head tag, how can I do it?

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

help-wanted

Source

demyan1411

Most helpful comment

Attachment: This is the future :)) React guys never would see something like that with plain css :))

pi0 on 29 Mar 2017

👍6

All 4 comments

@demyan1411 Please see @atinux answer to the almost same question (#333).
extract text plugin is not used in webpack (at least in current release) in order to make Nuxt fully PWA compatible so we don't have a separate css generated. We can easily add this back with nuxt.config's extend function and happy help you implement that. Anyway i don't recommend it, guys behind Vue are trying hard to resolve problems with critical path css loading (thus only classes used in page are in head tag) anyway currently it is not a big concern as atinux says, full bootstrap bundle is gzipped ~26KB and only needs to be loaded on first request.

pi0 on 29 Mar 2017

👍2

Attachment: This is the future :)) React guys never would see something like that with plain css :))

pi0 on 29 Mar 2017

👍6

The reasoning behind not extracting CSS may be logical, but it creates other problems, such as not being able to rely on the Vue mounted lifecycle event, and other styling-related issues. (See: #1684)