How to extract all the CSS to a single file in Nuxt?

Question

I'm currently building a UI Kit for a client who is using ASP.NET for the main application/backend for their project. The UI Kit that I'm building is created using NuxtJS and I want to compile all of the SCSS files along with Bootstrap into a single compiled CSS file, from what I've gathered on the Nuxt Docs they recommend compiling the SCSS files into single CSS files for each component.

Before I start making a mess of the config file, is there a way to compile them into a single file so the client can just enqueue it on their end? It doesn't need to be the most performative which is why we're going to push it into a singular file.

Answer 1

Here is the part of the doc for Nuxt2, I quote

You may want to extract all your CSS to a single file. There is a workaround for this:

nuxt.config.js

export default {
  build: {
    extractCSS: true,
    optimization: {
      splitChunks: {
        cacheGroups: {
          styles: {
            name: 'styles',
            test: /\.(css|vue)$/,
            chunks: 'all',
            enforce: true
          }
        }
      }
    }
  }
}

---

This part is not directly written but still available for Nuxt3, so I guess that it should work in a similar approach.

There is only one discussion on Nuxt3's repo, but you may start trying the snippet above already, to see if it fill some of your needs.