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 ?

Answer 1

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