How to extract all CSS into one file in Nuxt?

Question

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

Before I start messing with the config files, is there a way to compile them into a single file so that the client can enqueue it? It doesn't need to be the most performant, which is why we push it to a single file.

Answer 1

This is the part of the documentation specific to Nuxt2, I quote

nuxt.config.js

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

---

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

There is only

one discussion on Nuxt3's repository, but you can start trying out the snippets already above to see if it meets some of your needs.