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

user_7196736 0
Viewed 2276

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:

Global CSS in the style tag

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 :-)

nuxt.js vue.js webpack javascript
1 Answers

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
  }
}
user_43282750
Related