如何在 Nuxt 中将所有 CSS 提取到一个文件中？

Question

我目前正在为一个使用 ASP.NET 作为其项目的主应用程序/后端的客户构建一个 UI 工具包。我正在构建的 UI 套件是使用 NuxtJS 创建的，我想将所有 SCSS 文件与 Bootstrap 一起编译成单个已编译的 CSS 文件，根据我在 Nuxt 文档上收集的内容，他们建议将 SCSS 文件编译成单个每个组件的 CSS 文件。

在我开始弄乱配置文件之前，有没有办法将它们编译成单个文件，以便客户端可以将其排入队列？它不需要是最具性能的，这就是为什么我们将其推送到单个文件中。

Answer 1

这是文档针对 Nuxt2 的部分，我引用

nuxt.config.js

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

---

这部分不是直接编写的，但仍然可用于Nuxt3 ，所以我想它应该以类似的方式工作。

Nuxt3 的存储库上只有一个讨论，但您可以开始尝试上面已经有片段，看看它是否满足您的一些需求。