不能,less.js 从 v4 起废弃浏览器端运行时编译,v5 彻底移除 script[type="text/less"] 和 link[rel="stylesheet/less"] 支持,因安全、性能问题及现代构建工具已提供更优替代方案。

less.js 能不能在现代浏览器里直接跑 .less 文件?
不能,或者说——不推荐。less.js 的浏览器端编译早已被官方标记为 deprecated,从 v4 开始就不再维护运行时编译能力,v5 彻底移除了 less.js 的 script[type="text/less"] 解析逻辑。你现在用 CDN 引入最新版 less.js,页面里写 或内联 <script type="text/less"></script>,根本不会触发编译,控制台还会报 LessError: Runtime compilation is not supported。
为什么浏览器端实时编译 Less 会被废弃?
核心原因就两条:安全和性能。Less 编译器本身是 JS 实现,运行时解析、词法分析、AST 构建、CSS 生成全在前端做,既拖慢首屏,又暴露源码结构(比如变量、嵌套层级),还可能因用户输入或第三方 less 片段引入执行风险。更现实的是:现代构建链路(Vite、Webpack、esbuild)都能在 dev 时秒级监听 + 热更新,没必要把编译逻辑塞进浏览器。
- 开发阶段:构建工具的
less-loader或vite-plugin-less提供完整 sourcemap、变量提示、语法校验 - 生产环境:CSS 已是静态产物,
.less文件根本不该出现在线上 HTML 里 - 兼容性陷阱:旧版
less.js(如 v3.13)虽能跑,但不支持math=strict、新插件 API、嵌套 CSS(&后跟伪类写法)等特性
如果非要在浏览器里“试”Less,怎么最小成本验证?
只适用于临时调试、文档示例或教学演示,且必须锁定旧版本 + 手动初始化。别指望它能替代构建流程。
- 用
<script src="https://cdn.jsdelivr.net/npm/less@3.13.1/dist/less.min.js"></script>(注意版本号) - less 文件必须通过
引入,不能用rel="stylesheet" - 加载完脚本后,手动调用
less.refreshStyles()触发一次编译(否则可能不生效) -
a.less必须同域或开启 CORS,跨域会静默失败,控制台无明确报错
<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 前缀的日志。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











