在Vite配置中如何避免CSS文件重复引入公共样式？-js教程-PHP中文网

在Vite配置中如何避免CSS文件重复引入公共样式？

心靈之曲

发布： 2025-03-15 09:28:15

原创

733人浏览过

在vite配置中如何避免css文件重复引入公共样式？

优化Vite配置，避免重复引入公共CSS样式

在Vite项目中，引入全局SCSS样式时，常常会遇到重复引入的问题，导致代码冗余和构建体积增大。本文介绍如何配置Vite，提取公共CSS文件，避免此类问题。

问题：重复引入全局样式

假设你的Vite配置如下，意图引入global.scss：

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

登录后复制

然而，构建后每个CSS文件都包含了global.scss的内容。

解决方案：使用插件提取公共CSS

解决此问题，需要借助vite-plugin-css-injected-by-js插件。

立即学习“前端免费学习笔记（深入）”；

白果AI论文

论文AI生成学术工具，真实文献，免费不限次生成论文大纲 10 秒生成逻辑框架，10 分钟产出初稿，智能适配 80+学科。支持嵌入图表公式与合规文献引用

查看详情

安装插件:

npm install vite-plugin-css-injected-by-js

登录后复制

配置Vite: 在vite.config.js中添加插件：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue'; // 如果你使用Vue
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';

export default defineConfig({
  plugins: [
    vue(), // 如果你使用Vue
    cssInjectedByJsPlugin(),
  ],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "@/global.scss";',
        javascriptEnabled: true
      }
    }
  }
});

登录后复制