Search code examples
csswebpacknuxt.jsgenerate

Extract CSS in NUXTjs generate

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 ?

Solution

  • 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