工程化集成与扩展

Less 可集成到 Vite、Webpack、Vue CLI 等工具链，实现编译、全局变量注入与路径处理。核心语法（变量、嵌套、混合、运算、函数）见 Less 基础与核心语法。

一、在 Vite 中使用 Less

Vite 原生支持 .less 文件，只需安装 less 依赖即可。通过 vite.config.js 可以配置全局注入变量或 Mixin。

// vite.config.js
export default {
  css: {
    preprocessorOptions: {
      less: {
        additionalData: `@import "@/styles/variables.less";`,
      },
    },
  },
};

additionalData：在每个 .less 文件编译前插入一段 Less 代码（如全局变量导入），避免在每个文件中重复 @import。
也支持配置 javascriptEnabled: true 以启用 Less 内联 JavaScript 表达式（注意安全性）。

二、在 Webpack 中使用 Less

需要配合 less-loader 将 Less 编译为 CSS，并结合 css-loader 和 style-loader（或 MiniCssExtractPlugin.loader）。

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          "style-loader", // 将 CSS 注入 DOM
          "css-loader", // 解析 CSS 中的 @import、url()
          "less-loader", // 编译 Less 为 CSS
        ],
      },
    ],
  },
};

传递 Less 全局变量（类似 Vite 的 additionalData）：

{
  loader: 'less-loader',
  options: {
    additionalData: `@import "@/styles/variables.less";`
  }
}

也可通过 globalVars 直接注入变量对象：

options: {
  globalVars: {
    'primary-color': '#4D926F'
  }
}

三、在 Vue CLI 中使用 Less

创建项目时选择：

bash

vue create my-app
# 在预设中选择 "Manually select features" -> 勾选 CSS Pre-processors -> 选择 Less

现有项目添加 Less：

bash

npm install less less-loader --save-dev

之后在 Vue 单文件组件中直接使用 <style lang="less">，Vue CLI 会自动处理编译。

全局变量注入（无需每个组件都 import）：在 vue.config.js 中配置：

module.exports = {
  css: {
    loaderOptions: {
      less: {
        additionalData: `@import "@/styles/variables.less";`,
      },
    },
  },
};

四、URL 重写（`--rewrite-urls`）

当 Less 文件分散在不同目录，且通过相对路径引用资源（图片、字体等）时，编译后的 CSS 可能因为输出目录结构与源文件不同而导致资源 404。Less 提供了 --rewrite-urls 选项自动修正路径。

命令行使用：

bash

lessc --rewrite-urls=all styles.less styles.css

--rewrite-urls=all：将所有 url() 中的相对路径根据最终输出位置重写。
还支持 --rewrite-urls=local（仅重写相对当前文件的路径，不处理跨目录引用）。

在构建工具中启用（以 less-loader 为例）：

{
  loader: 'less-loader',
  options: {
    rewriteUrls: 'all'   // 或 'local'
  }
}

此功能对于大型项目（如组件库、多子项目）尤其有用，可避免手动维护路径。

五、构建工具自动编译与热更新

Vite：开发环境下基于原生 ES 模块，Less 文件修改后触发 HMR（热模块替换）。
Webpack：配合 webpack-dev-server 同样支持热更新。
Vue CLI：内置开发服务器，保存 .vue 或 .less 文件后实时重绘。

总结

工具	集成方式	全局变量注入	路径重写
Vite	原生支持，仅需安装 `less`	`additionalData`	`rewriteUrls` 选项
Webpack	`less-loader`	`additionalData` 或 `globalVars`	`rewriteUrls` 选项
Vue CLI	创建时选择，或手动安装	`loaderOptions.less.additionalData`	同 less-loader
命令行	`lessc` 命令	`--modify-var`	`--rewrite-urls=all/local`

配置项名称以所用 less / less-loader 版本文档为准。

六、常见问题

现象	可能原因 / 处理
全局变量未生效	`additionalData` / `globalVars` 配置的变量文件路径不正确，或未重启开发服务器使配置生效
图片、字体等资源 404	输出目录结构与源文件不同导致相对路径失效，启用 `rewriteUrls` 选项修正
Vue CLI 项目切换预处理器后报错	确认已安装对应的 `less` 与 `less-loader` 版本，二者需相互兼容
`javascriptEnabled` 相关报错	该选项允许 Less 内联 JavaScript 表达式，涉及执行任意代码，若非必要不建议开启

参考文献

以下链接在编写时均可正常访问：

资料	说明
Less 官方文档	CLI 与选项
Vite：CSS 预处理器	Vite 中 less 配置
less-loader	Webpack 集成