lessc是Less官方命令行工具，用于直接编译.less为.css，支持全局安装（npm install -g less）、基础编译（lessc src.less dist.css）、压缩输出（--clean-css）及路径含空格时加引号等用法。
用 lessc 命令行工具直接编译，最稳也最可控
如果你只是想把一个 style.less 变成 style.css，lessc 是首选。它不依赖构建工具，装完就能用，适合调试、CI 或临时任务。
- 先全局安装：
npm install -g less（确保 Node.js 已安装） - 基础编译命令：
lessc style.less style.css - 加压缩输出：
lessc --clean-css style.less style.min.css - 遇到
Cannot find module 'less'？说明当前目录没装less，要么全局装，要么用npx lessc避免全局依赖 - 路径含中文或空格时，务必用引号包裹：
lessc "src/组件/主题.less" "dist/主题.css"
Webpack 里配 less-loader，适合已有前端工程
项目已用 Webpack（比如 Vue CLI 或 Create React App 自定义配置），就别单独调 lessc，走 loader 流程更统一。
- 装依赖：
npm install --save-dev less less-loader（注意：Webpack 5+ 不再内置css-loader，得额外装） - 在
webpack.config.js的module.rules中加：{ test: /\.less$/i, use: ['style-loader', 'css-loader', 'less-loader'] } -
less-loader默认用 Less 4.x，若项目依赖旧版（如 3.x），需指定版本并配lessOptions，否则可能报Inline JavaScript is not enabled - 如果要输出独立 CSS 文件（而非插入 DOM），得配合
MiniCssExtractPlugin，且style-loader要换成它
VS Code 插件自动编译，适合小项目或写文档时快速预览
纯静态页、原型稿或 Markdown 里嵌 Less 片段，开个插件点保存就出 CSS，比敲命令快得多。
- 推荐插件：
Easy LESS（注意不是Less那个同名但不维护的） - 装完默认监听
.less文件，保存即生成同名.css；路径和输出位置可在settings.json里配easy-less.outputDir - 常见坑：
Easy LESS不解析@import相对路径中的上级目录（如../mixins.less），会报File not found—— 改用绝对路径或调整rootPath - 它不处理
@plugin，也不支持 Less 4 的新语法（如math模式），复杂项目别依赖它做最终构建
浏览器里直接 less.js 运行，仅限开发调试，切勿用于生产
想改一行 Less 看效果，又懒得起服务？引入 less.js 让浏览器实时编译，快是快，但代价明显。
立即学习“前端免费学习笔记（深入）”；
- HTML 里加两行：
<link rel="stylesheet/less" type="text/css" href="style.less"> <script src="https://cdn.jsdelivr.net/npm/less@4.2.0/dist/less.min.js"></script>
- 必须用
stylesheet/less类型，且less.js要在<link>后加载，否则啥都不发生 - 每次刷新都重新编译，性能差；无法 source map；报错信息藏在 console 里，定位困难
- 所有
@import路径按浏览器当前 origin 解析，跨域或本地 file:// 协议下基本失效
真正上线前，一定用 lessc 或构建工具生成静态 CSS —— 浏览器编译只是临时拐杖，撑不了真活。
