Less浏览器编译教程及less.js使用详解

Less.js 已彻底放弃浏览器端运行时编译支持，v4起标记为废弃、v5中完全移除对`

less.js 能不能在现代浏览器里直接跑 .less 文件？

不能，或者说——不推荐。less.js 的浏览器端编译早已被官方标记为 deprecated，从 v4 开始就不再维护运行时编译能力，v5 彻底移除了 less.js 的 script[type="text/less"] 解析逻辑。你现在用 CDN 引入最新版 less.js，页面里写 或内联 （注意版本号）

<link rel="stylesheet/less" href="theme.less">
<script src="https://cdn.jsdelivr.net/npm/less@3.13.1/dist/less.min.js"></script>
<script>less.refreshStyles();</script>

真正该怎么做？构建时编译才是唯一可靠路径

所有主流工具都默认支持 Less，关键是配对正确 loader 和选项。比如 Vite 中开箱即用，但默认不启用 javascriptEnabled（影响某些老库的 @plugin），而 Webpack 的 less-loader v11 起要求显式传 lessOptions 对象。

• Vite：无需安装插件，import './index.less' 即可，如需修改配置，在 vite.config.ts 加 css.preprocessorOptions.less
• Webpack：确保 less-loader 版本与 less 版本匹配（例如 less@4 配 less-loader@10），否则 @value 或 math 参数会失效
• 路径别名：Webpack 的 resolve.alias 和 Vite 的 resolve.alias 都要同步配置到 lessOptions.paths，否则 @import '~vars' 会找不到

最常被忽略的一点：less 编译错误不会中断 HMR，但会静默丢弃样式，导致页面“突然没样式了”，却找不到报错来源——务必打开浏览器 DevTools 的 Console，并留意 less: error 前缀的日志。

今天关于《Less浏览器编译教程及less.js使用详解》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！