Extract CSS in NUXTjs generate

Question

When using nuxt generate I am generating various HTML pages that happen to be about 300 kB in size. Majority of the file is CSS style placed inline to it. Is it a way to put it in an external file and reduce size of HTML ?

Define what you mean by *placed inline to it*, do you mean in the .vue files in the ` — Lawrence Cherone, Jun 19 '18 at 05:13

score 19 · Accepted Answer · answered Jun 20 '18 at 11:23

You can extract the CSS in the main chunk into a separate CSS file using

nuxt.config.js

module.exports = {
  build: {
    extractCSS: true
  }
}

This is documented here

If you want to import css files globally use

module.exports = {
  css: [
    // Load a Node.js module directly (here it's a Sass file)
    'bulma',
    // CSS file in the project
    '@/assets/css/main.css',
    // SCSS file in the project
    '@/assets/css/main.scss'
  ]
}

as documented here

Extract CSS in NUXTjs generate

1 Answers1