Nuxt.js: How move Global CSS from style tag to css file

Question

I'm confused with the Nuxt.js SCSS compilation... I have the assets folder and it has two SCSS files included in nuxt.config.js:

  // Global CSS (https://go.nuxtjs.dev/config-css)
  css: [
    '~assets/scss/bootstrap.scss',
    '~assets/scss/main.scss'
  ],

Launch npm run build and then npm run generate, then I go into the dist folder and open the index.html file, what I see is all css (and it is too big) inside the style tag on the page:

Nuxt.js has compiled the SCSS files from assets and put CSS in the style tag. How put into a file and connect with link tag in the head section like this?

<link rel="stylesheet" href="/css/bootstrap.css">
<link rel="stylesheet" href="/css/main.css">

You may say I can use head settings in nuxt.config.js, but I cannot because it is possible only with remote and static files, it does not work like this:

head: {
  meta: [
    { charset: 'utf-8' },
    { name: 'viewport', content: 'width=device-width, initial-scale=1, user-scalable=0, shrink-to-fit=no' },
    { hid: 'description', name: 'description', content: '' }
  ],
  link: [
    { rel: 'stylesheet', href: '~/assets/scss/bootstrap.scss' },
    { rel: 'stylesheet', href: '~/assets/scss/main.scss' },
    { rel: 'icon', type: 'image/svg+xml', href: '/images/logo.svg' },
  ],
  script: []
},

I did not find in the Nuxt.js documentation how put the Global CSS to a file. Is it possible with Nuxt.js config or change the Webpack build config only? Help me understand please :-)

Nicolas Pennec · Accepted Answer · 2021-02-12 23:24:24Z

8

You can use the extractCSS build option to extract all your CSS assets into separate files (usually one per component) and allows you to put in cache each CSS file:

// nuxt.config.js

export default {
  build: {
    extractCSS: true
  }
}

answered Feb 12, 2021 at 23:24

Nicolas Pennec

7,62131 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

eleave Over a year ago

Dat works! I'll be read the docs more accurately. thanks for the answer and the doc link.

kissu Over a year ago

I'm wondering if there are some issues with it being set to true as a default because this one seems to be really nice and with no drawbacks.

cam Over a year ago

The drawback is that the users browser has to make multiple network requests.

Collectives™ on Stack Overflow

Nuxt.js: How move Global CSS from style tag to css file

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related