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

  // Global CSS (/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 piled 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 :-)

I'm confused with the Nuxt.js SCSS pilation... 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 piled 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 :-)

• javascript
• vue.js
• webpack
• nuxt.js

1 Answer 1

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

// nuxt.config.js

export default {
  build: {
    extractCSS: true
  }
}