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插件。

1. 安装插件:

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

2. 配置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
      }
    }
  }
});

3. 确保正确引入: 在组件中，不要直接使用