孙圈圈接手一个老项目，第一头疼的不是业务逻辑乱，而是新写一个 .less 文件时总要先复制一长串 @import。少复制一行，编译期就开始报 Variable @primary-color is undefined。CSS 和 Less 配合得越深，越容易遇到这个局面：通用变量、mixin 是公共资产，却被锁在一个个文件里，必须手动“请”进来才能用。这篇文章要聊的，就是怎么用预处理器全局变量预设的思路，在 Webpack / Vite 构建阶段把 Less 的通用配置自动注入到所有业务样式文件里，让变量、mixin 到手即用，省掉反复 import 的机械劳动。如果你也维护着一个样式文件多、变量链超长的前端项目，这篇实操记录应该能帮你节省不少时间。
先亮观点：Less 本身没有“全局注册表”这种概念，所谓自动注入，本质上是在编译每个 Less 文件之前，由构建工具给文件头部追加一段公共内容。只要理解了这一层，后面无论用 Webpack、Vite 还是其他构建链，思路都通用。我会把背后的原理、具体配置、以及我实际踩过的坑一次性讲清楚。
1. 拆解“自动注入”到底解决什么问题
1.1 天天手写 @import 的日子，应该到头了
先说个很典型的场景。项目中通常有一个 src/styles 目录，里面塞着 variables.less、mixins.less、functions.less，这些文件本身不直接输出 CSS，只是给业务样式提供“生产资料”。于是每个页面的样式文件开头，几乎都是这么几行：
less复制@import "~@/styles/variables.less";
@import "~@/styles/mixins.less";
@import "~@/styles/functions.less";
看起来不复杂，但把一个超过 100 个组件的项目放大来看，问题就出来了。新人常常漏写其中一个，老手复制粘贴时也容易带错路径。更麻烦的是，一旦你调整了目录结构，比如把 mixins.less 拆成了 mixins/flex.less 和 mixins/text.less，所有业务文件的 import 路径都要跟着改一遍。这种重复不仅没有技术含量，还总在改版时制造一堆无意义的 diff。
自动注入就是把这段公共的“入场仪式”从每个文件里抽走，交给构建工具统一处理。你打开业务 Less 文件直接写 .wrap { .flex-center(); color: @primary-color; }，不需要在最上面写任何 import。构建时预处理器会在每个文件前面自动补上公共变量的定义，相当于编译器替你做了“贴便签”的动作。
1.2 全局变量预设不等于 Less 原生全局变量
很多朋友第一次听到“Less 自动注入全局变量”时，会以为 Less 语言内部就支持注册全局变量。这里需要澄清一下：Less 的变量是有文件作用域和“后导入”语义的，一个变量必须在某个文件中被 @import 之后，后续文件才能引用。它没有一个类似“所有文件都能直接访问的命名空间”。
那标题里说的“预处理器全局变量预设”是指什么呢？指的是构建链路上的能力。less-loader 或 less 编译器提供了 globalVars、modifyVars 这类参数，在真正编译每个 Less 文件之前，先往编译上下文里塞入一段变量声明。同时，像 Webpack 的 additionalData、Vite 的 css.preprocessorOptions.less.additionalData，也能在文件内容前追加任意 Less 代码。
所以可以这样理解：全局变量预设是一个“编译前处理机制”，不是 Less 语言本身的语法糖。它由预处理器 API 和构建工具共同实现。你能注入的不只是单个变量，也可以是一整个公开文件——只要这段内容在每个 Less 文件编译前被拼到文件头部，效果就像是 Less 原生内置了全局变量一样。
1.3 这套玩法适合哪些项目与团队
我的经验是，这种注入方案最适合两类项目。第一类是组件数量多、样式文件分散的中后台系统，这类项目往往有统一的设计变量和常用 mixin，参与开发的人多，靠自觉去 import 基本不现实。第二类是组件库项目，样式文件是给别人二次开发的，库内部如果不做自动注入，写每个组件样式时都要重复引入主题变量，效率极低。
但它不是银弹。如果页面只有三个样式文件，或者你只是写个静态演示页，完全没必要上这套配置，纯属增加构建链路的心智负担。另外，如果项目中 CSS Modules 使用得比较重，自动注入虽然不会直接破坏 CSS Modules 的命名隔离，但因为注入的是全局共享定义，业务文件里出现同名变量时会存在“本地覆盖”或“全局覆盖”的差异，这个坑我后面会专门讲。总体来说，团队规模越大、公共样式越多，这套方案的价值就越高。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 选型：三套注入方案的对比与取舍
2.1 additionalData / prependData：最推荐的方法
先说 Webpack 体系里兼容性最好、功能最完整的方式：在 less-loader 配置里使用 additionalData 字段。
写过 Webpack 配置的人都知道，loader 之间是按从右到左的顺序处理资源的。less-loader 负责把 Less 语法编译成 CSS，在它开始处理之前，options.additionalData 指定的字符串会被追加到 Less 文件源码的前面。你可以把它理解成在代码最顶端偷偷执行了一次“粘贴”，然后再把粘贴后的完整内容交给 Less 编译器。
举例来说，在 webpack.config.js 中：
javascript复制const path = require('path');
module.exports = {
module: {
rules: [
{
test: /\.less$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: { importLoaders: 2 }