Nuxt.js: How to package the CSS file into a separate file

[HadiChen]

the above configuration does not take effect

_{This bug report is available on Nuxt.js community (#c1366)}

[yuchonghua]

How to make the embedded style automatically extract to the css file? In fact this is mainly on the seo not very friendly? Some search engines are particularly fond of inline styles and base64 images

[jsonberry]

@HadiChen Hello!

It looks like your example is from a pages/web.vue component. Can you share the contents of that components <style> tag?

[HadiChen]

@jsonberry

[js-yezi]

Asked, I also encountered this problem
/ping @alexchopin

[lucasfischer]

having the same issue.

also, it would be cool if the css property in the config file would extract all the css in one big file that could be cached, so the browser don't need to load the whole css every time the page gets loaded.

ps: keep up the good work. love your project so far.

[Atinux]

#1533

[yuchonghua]

@Atinux It seems that this problem has not been solved and we hope that it will be resolved

[ahmedfaical]

Any solution for this problem?

[TonyLuo]

+1 . the nuxt still embed all css into every html files, that make html file size very large...
any solution to extract the css in a common css file and include it in html file instead of embeding all the complied css inline in html file?

[blissjaspis]

guys you just add extractCSS: true to your nuxt.config.js to see this works .

after that npm run build then npm run start.

[HadiChen]

add

extractCSS: {
      allChunks: true
    }

to your nuxt.config.js @TonyLuo

[TonyLuo]

@HadiChen it doesn't work for me....

[martpie]

Try

build: {
  extractCSS: {
    allChunks: true
  }
}

instead, this is what worked for me.

[TonyLuo]

which command do you run? I run " npm run generate" to generate static html , the generated html files contain full set of embed css...

[martpie]

I use npm run generate too, what I posted above is what splited the CSS in its own file.

The whole relevant content of my nuxt.config.js:

module.exports = {
  ...,
  css: [
    '~/assets/styles/main.scss',
  ],
  build: {
    extractCSS: {
      allChunks: true
    },
    ...
  },
  ...
}

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