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

Question

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

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

Answer 1

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

您可能希望将所有 CSS 提取到一个文件中。有一个解决方法：

nuxt.config.js

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

---

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

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

Answer 2

对于 nuxt 3，使用 Vite：

 vite: {
   build: {
     cssCodeSplit: false,
  },
 }

使用网页包：

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

链接：https://vitejs.dev/config/build-options.html#build-csscodesplit