Vite 中实现打包时自动引入全局样式的核心是通过 preprocessorOptions 的 additionalData 配置，在每个 Less/Sass 文件编译前自动注入 global.less，使变量、mixin 全局可用；该方式不影响 JS 中的 CSS-in-JS，需额外导出 JS 变量对象或使用 CSS 自定义属性同步。
在 Vite 构建中实现“打包时自动引入全局样式文件”，核心不是让 JS 代码显式 import 样式，而是让所有组件（包括 JSX/TSX、.vue 文件）在编译阶段就**自动注入全局变量、mixin 或样式规则**，无需每处手动 @import。这主要通过 CSS 预处理器（如 Less、Sass）的 additionalData 配置达成，适用于开发和生产构建。
配置 preprocessorOptions 注入全局 Less/Sass 文件
这是最常用、最稳定的方式，适用于项目中大量使用 Less 或 Sass 变量、函数、Mixin 的场景：
- 在
vite.config.ts或vite.config.js的css.preprocessorOptions中配置additionalData - 路径必须为相对路径（从项目根目录出发），推荐放在
src/assets/styles/下，例如global.less - Vite 会在每个
<style lang="less">或.less文件内容前自动拼接该字符串，相当于每处都隐式@import了一次
示例（Less）：
<!-- vite.config.ts -->css: {<br> preprocessorOptions: {<br> less: {<br> additionalData: '@import "./src/assets/styles/global.less";'<br> }<br> }<br>}
当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。
立即学习“Java免费学习笔记（深入）”；
确保全局样式在 JS 中也生效（如 CSS-in-JS 或 runtime 注入）
上述配置只影响 <style> 标签或 .less 文件。若你在 JS/TSX 中用 styled-components、emotion 或纯对象样式（如 style={{ color: variables.primary }}），则需额外处理：
- 将颜色、尺寸等常量导出为 JS 对象（如
src/assets/styles/variables.ts），在组件中直接import { colors } from '@/assets/styles/variables' - 避免把样式逻辑耦合进 CSS 预处理器——JS 和 CSS 两套变量体系易不同步
- 若坚持统一管理，可用
postcss-variables+postcss插件，将 CSS 自定义属性（:root { --primary: #3a86ff; }）同步到 JS，但复杂度较高，非必要不推荐
注意：不要混淆“全局样式”与“全局 CSS 文件引入”
有些同学误以为在 main.ts 中 import './assets/styles/global.css' 就算“自动引入”，但这只是让该 CSS 在入口 JS 中加载，对组件内 scoped 样式、CSS Modules 或预处理器变量无任何影响：
- 它能重置默认样式、设置字体、定义
:root变量（供var(--xxx)使用） - 但它无法让
.btn { color: @primary-color; }中的@primary-color生效——那必须靠预处理器的additionalData - 若你只用原生 CSS，推荐用
:root+CSS custom properties，再配合 JS 读取getComputedStyle(document.documentElement).getPropertyValue('--primary-color')
进阶：按需注入（仅限库模式 / 组件包场景）
如果你正在用 Vite build.lib 打包一个独立组件（如 MyButton），且希望使用者无需手动引入 CSS，可结合插件实现样式内联：
- 使用
vite-plugin-css-injected-by-js：它会把组件中 import 的 CSS 提取为字符串，在 JS 中动态创建<style>标签注入 DOM - 搭配
rollup-plugin-postcss或@stylable/rollup等，支持提取并内联 scoped 或非 scoped 样式 - 注意：此方式生成的 JS 包含样式逻辑，体积略增，但使用方零配置 ——
import MyButton from 'my-lib';即可，不用再import 'my-lib/dist/style.css'
