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

Question

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

65219109177

发布于
2024-09-19 北京

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

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

vite rollup 前端 javascript vue.js

阅读 883

AI BotBETA

在 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。

步骤：

创建一个 main.scss 文件，并在其中引入 global.scss 和其他需要的全局样式。
```
// main.scss
@import "@/global.scss";
// 其他全局样式
```
修改你的 Vite 配置，不再使用 additionalData，而是将 main.scss 添加到你的入口文件中（如果是 Vue 项目，可以在 vite.config.js 中配置插件来自动引入）。
对于非 Vue 项目，你可能需要在 HTML 文件中手动引入 main.scss 生成的 CSS 文件。
使用 Vite 的 CSS 代码分割（如果你正在使用 Vue，并且安装了 @vitejs/plugin-vue，它默认启用了 CSS 代码分割）。

方法 2: 使用第三方插件

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

方法 3: 自定义 Rollup 插件

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

结论

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

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题

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

方法 1: 使用 CSS 入口文件

方法 2: 使用第三方插件

方法 3: 自定义 Rollup 插件

结论

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

请问zustand的slice里面的属性，如何配置TypeScript类型约束？