ci/cd中必须用lessc命令行编译less，启用--js和--include-path参数以支持@plugin、动态计算及路径解析，并生成静态css文件；禁用浏览器端less.js和ide自动编译。
CI/CD里跑Less转CSS，不能靠本地手动编译或浏览器端less.js加载——那根本进不了构建流水线。必须用可复现、无状态、能集成到npm run或make中的命令行方式，且要规避lessc默认不带javascriptEnabled导致的@import失败或变量计算报错。
CI/CD中必须用lessc而非less.js客户端加载
浏览器里用less.js加<link rel="stylesheet/less">只适合开发调试，CI/CD环境没有DOM、不执行JS、也不允许AJAX加载.less文件。所有样式必须在构建阶段生成静态.css文件，否则部署后页面白屏或样式丢失。
-
less.js依赖window和XMLHttpRequest，CI节点（如GitHub Actions runner）是纯Node环境，直接报ReferenceError: window is not defined - 即使强行
require('less')在Node里调用，不显式启用javascriptEnabled: true，遇到@plugin或math函数会静默失败 - CI输出产物必须是确定性文件，不能依赖“保存时自动编译”这类IDE行为（如WebStorm的File Watcher），CI服务器没装IDE插件
lessc命令行参数必须显式控制--js和--include-path
lessc默认禁用JS执行，而很多项目用@plugin或unit()/percentage()等需运行时计算的函数。不加--js会导致编译中断；不设--include-path则@import 'utils/mixins'找不到路径。
- 正确写法：
lessc --js --include-path=src/less src/less/main.less dist/css/main.css -
--js等价于javascriptEnabled: true，必须加，否则@import相对路径、~node_modules别名、函数调用全挂 -
--include-path指定根查找目录，避免每个@import写冗长相对路径，也方便统一管理node_modules里的第三方less库（如bootstrap/less） - 不要用
lessc *.less批量编译——它不递归，也不处理依赖图，容易漏文件；应配合find或glob脚本逐个编译
CI脚本里要区分开发与生产模式的压缩行为
CI流程通常分build和build:prod两套任务。lessc本身不压缩CSS，但CI里常需要内联autoprefixer和clean-css，且开发环境要保留source map供调试。
- 开发构建（如
npm run build）：加--source-map生成.css.map，不启用clean-css，便于Chrome DevTools定位原始less行号 - 生产构建（如
npm run build:prod）：去掉--source-map，管道接cleancss-cli或用postcss链式处理，避免lessc自带的--compress（已废弃且效果差） - 示例CI命令：
lessc --js --source-map src/less/app.less dist/css/app.css && postcss -u autoprefixer -u cssnano dist/css/app.css -o dist/css/app.css
Gulp/Grunt插件在CI中反而增加维护成本
虽然gulp-less或grunt-contrib-less能封装配置，但在CI里它们只是lessc的包装器，额外引入gulp或grunt依赖，却没带来实质收益——反而让故障排查变复杂（比如gulp版本兼容问题、task注册顺序错误）。
- CI脚本应尽量“去框架化”：直接调
lessc二进制，路径清晰、退出码明确、日志直出 -
package.json中定义"scripts": { "build:css": "lessc --js src/less/index.less dist/css/index.css" }，CI直接npm run build:css即可 - 若项目已有Gulpfile，务必确认
lesstask里显式传了javascriptEnabled: true——gulp-less默认不开启，不设就静默失败
真正麻烦的不是编译本身，而是Less里混用@plugin、~别名、动态@import时，lessc报错信息极简（只有“ParseError”），得靠--verbose和手动拆解@import链才能定位哪一行触发了JS执行限制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
