Vite配置中如何避免CSS重复引入？

Vite项目中全局SCSS样式重复引入导致代码冗余和构建体积增大？本文提供解决方案：利用`vite-plugin-css-injected-by-js`插件避免Vite重复引入公共CSS样式。通过安装该插件并配置`vite.config.js`，将公共样式（例如`global.scss`）提取到单独的CSS文件中，从而优化项目构建效率和减小文件体积。 文章详细介绍了插件安装、配置步骤以及验证方法，助你轻松解决Vite公共样式重复引入问题。

优化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. 确保正确引入: 在组件中，不要直接使用标签引入global.scss，而是依赖于上述additionalData配置。

4. 验证结果: 重新构建项目，检查生成的CSS文件，确保global.scss的内容只存在于一个单独的CSS文件中。

通过以上步骤，你可以有效避免在Vite中重复引入公共CSS样式，从而优化项目构建效率和文件大小。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《Vite配置中如何避免CSS重复引入？》文章吧，也可关注golang学习网公众号了解相关技术文章。