javascript - vite如何提取公共的css文件？

Question

vite配置引入了公共的scss文件，打包后，每个css文件都重复引入了global.scss文件中的内容，如何提取出一个公共的css文件？

css: {
  preprocessorOptions: {
    scss: {
      additionalData: '@import "@/global.scss";',
      javascriptEnabled: true
    }
  }
}

Answer 1

在 Vite 中，当你使用 preprocessorOptions 的 additionalData 来全局引入 SCSS 文件时，确实可能会导致每个组件或页面的 CSS 输出中都包含这些全局样式。为了避免这种情况，并提取出一个单独的公共 CSS 文件，你可以使用 Vite 的插件系统或构建配置来优化你的 CSS 输出。

不过，Vite 本身并没有直接提供像 Webpack 的 MiniCssExtractPlugin 那样的插件来直接提取公共 CSS。但是，你可以通过以下方法来尝试解决这个问题：

方法 1: 使用 CSS 入口文件

你可以创建一个单独的 CSS 文件（例如 main.scss），并在其中 @import 所有的全局样式文件（包括 global.scss）。然后，在 Vite 配置中，你可以将 main.scss 作为 CSS 的入口文件，而不是在 preprocessorOptions 中使用 additionalData。

步骤：

1. 创建一个 main.scss 文件，并在其中引入 global.scss 和其他需要的全局样式。

   // main.scss
   @import "@/global.scss";
   // 其他全局样式

2. 修改你的 Vite 配置，不再使用 additionalData，而是将 main.scss 添加到你的入口文件中（如果是 Vue 项目，可以在 vite.config.js 中配置插件来自动引入）。

   对于非 Vue 项目，你可能需要在 HTML 文件中手动引入 main.scss 生成的 CSS 文件。

3. 使用 Vite 的 CSS 代码分割（如果你正在使用 Vue，并且安装了 @vitejs/plugin-vue，它默认启用了 CSS 代码分割）。

方法 2: 使用第三方插件

虽然 Vite 没有内置的插件来直接提取公共 CSS，但你可以查找是否有第三方插件实现了这一功能。例如，有些社区插件可能模仿了 Webpack 的 MiniCssExtractPlugin 的行为。

方法 3: 自定义 Rollup 插件

如果你需要更高级的自定义，你可以通过编写自己的 Rollup 插件来直接控制 CSS 的打包过程。这涉及到对 Rollup 和 Vite 插件系统的深入了解。

结论

对于大多数情况，使用 CSS 入口文件（方法 1）应该是最简单和最直接的方法。这可以确保全局样式只被包含一次，并且可以在构建过程中被有效地管理和优化。如果你需要更复杂的 CSS 管理，考虑使用第三方插件或编写自定义 Rollup 插件。