Rollup需借助rollup-plugin-less插件处理Less文件，该插件拦截.less路径并调用less编译器生成CSS；必须安装less和rollup-plugin-less，且插件需配置output路径才能输出CSS文件。
Rollup本身不处理Less，必须靠插件介入
Rollup原生只解析JS模块，less文件会被当作普通资源忽略，直接放进input里会报“not found”或空输出。真正起作用的是rollup-plugin-less这类插件——它在构建阶段拦截.less路径，调用less编译器转成CSS字符串，再注入到CSS输出流程中。
常见错误是只装了less但没装对应插件，或者插件没配置output目标路径，结果CSS生成了却找不到文件。
- 必须安装两个包：
npm install -D less rollup-plugin-less - 插件默认不写入文件，需显式传
output选项（如output: 'dist/main.css'） - 若项目含
@import嵌套，确保paths选项包含所有node_modules或src/less等搜索路径
单入口Less → 单CSS文件的最小可行配置
这是最常用场景：一个src/styles/app.less作为主入口，里面@import变量、mixin和组件样式，最终输出一个dist/app.css。关键点在于插件要挂载到build阶段，且output.format设为'es'或'iife'不影响CSS输出。
示例rollup.config.js片段：
import less from 'rollup-plugin-less';
export default {
input: 'src/styles/app.less',
output: { file: 'dist/app.css', format: 'es' },
plugins: [
less({
output: 'dist/app.css', // 必须指定，否则只返回CSS字符串不落地
paths: ['src/styles', 'node_modules']
})
]
};
注意：input路径必须指向.less文件，不能是.js；output.file和插件output可不同名，但后者决定实际生成位置。
批量转译多个Less文件时别踩路径陷阱
所谓“批量”，不是让Rollup自动扫描.less文件——它没有这个能力。你得手动列出每个入口，或用glob预生成数组。否则容易出现：部分文件漏编译、路径拼错导致@import失败、相对路径在不同目录下解析错乱。
- 用
glob动态获取入口（推荐）：import glob from 'glob'; const lessEntries = glob.sync('src/less/**/*.less'); - 每个入口需独立配置
output，避免覆盖：less({ output: entry.replace(/\.less$/, '.css') }) - 禁止在
rollup.config.js里用fs.readdirSync同步读取——Rollup配置是同步执行的，但插件运行在异步构建阶段
开发时热更新失效？检查HMR依赖链是否完整
修改common.less里的变量后，引用它的header.less没刷新，本质是Rollup没感知到依赖变更。因为@import是Less语法，不是ESM import，插件必须显式声明watch行为。
rollup-plugin-less高版本支持watch选项，但需配合Rollup的watch模式启动：
rollup -c --watch
同时插件配置加一句：watch: true。否则只监听入口文件，不递归监听@import链上的所有.less文件。
另一个坑：某些插件版本对paths中的node_modules路径监听不敏感，建议把公共variables.less放在项目内而非node_modules中管理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
