I'm having some difficulties with the Nuxt.js SCSS compilation process. In my project, I have an assets folder containing two SCSS files that are included in the nuxt.config.js:
// Global CSS (https://go.nuxtjs.dev/config-css)
css: [
'~assets/scss/bootstrap.scss',
'~assets/scss/main.scss'
],
After running npm run build and then npm run generate, I checked the dist folder and opened the index.html file to find all the CSS embedded within a large style tag on the page:
https://i.sstatic.net/uu1Zw.png
Instead of this approach, I would like Nuxt.js to compile the SCSS files from assets and put the CSS into separate files linked via <link> tags in the head section, like so:
<link rel="stylesheet" href="/css/bootstrap.css">
<link rel="stylesheet" href="/css/main.css">
While I am aware of the head settings in nuxt.config.js, I've learned that they only support remote and static file links, not local ones like in my case:
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: []
},
Is there a way to instruct Nuxt.js to output Global CSS to individual files? Can this be achieved through Nuxt.js configuration or by altering the Webpack build configuration? Your guidance in clarifying this matter would be greatly appreciated :-)