在Vite项目中，重复引入公共CSS文件（例如global.scss）会显著增加最终打包体积。本文将演示如何使用vite-plugin-css-extract插件高效地提取和优化公共CSS。
假设你的vite.config.js中配置了如下代码，用于导入公共SCSS文件：
css: {
preprocessorOptions: {
scss: {
additionalData: '@import "@/global.scss";',
javascriptEnabled: true
}
}
}此配置导致每个组件的CSS文件都包含global.scss的内容，造成冗余。
vite-plugin-css-extract插件可以有效解决这个问题。
立即学习“前端免费学习笔记（深入）”；
npm install vite-plugin-css-extract --save-dev
在vite.config.js中添加插件：
import { defineConfig } from 'vite';
import cssExtract from 'vite-plugin-css-extract';
export default defineConfig({
plugins: [cssExtract()],
css: {
preprocessorOptions: {
scss: {
additionalData: '@import "@/global.scss";',
javascriptEnabled: true
}
}
}
});插件会自动将公共CSS（例如global.scss）提取到单独的CSS文件中，通常命名为global.css。
最后，在你的HTML文件中引入生成的global.css文件：
<link href="/global.css" rel="stylesheet">
通过以上步骤，你的公共CSS文件将被单独提取，避免重复引入，从而显著减小最终打包体积，提升项目性能。
以上就是如何在Vite中提取公共的CSS文件以优化打包体积？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
777
