Vue项目编译时Less加载报错：Cannot read property 'denominator' of undefined

看起来你遇到的问题核心是less-loader尝试解析Bootstrap的CSS文件时，错误地处理了其中的calc()表达式，从而抛出Cannot read property 'denominator' of undefined的报错。下面是具体的分析和可落地的解决方案：

问题根源 #

Bootstrap的CSS文件中包含calc(0.75em + 2.3125rem)这类混合单位的表达式，当你在.less文件中直接引入.css文件时，默认情况下less-loader会把它当作Less代码去解析。Less的语法解析器会试图计算calc()内部的表达式，但em和rem属于不同类型的单位，无法被Less直接计算，最终触发了这个报错。

解决方案 #

1. 正确在Less中引入CSS文件 #

如果你仍需要在Less文件中引入Bootstrap的CSS，要明确告诉less-loader这是纯CSS文件，不要解析它的Less语法。修改你的引入语句为：

@import (css) "~bootstrap/dist/css/bootstrap.css";

这里的(css)选项会让less-loader直接把文件内容当作原生CSS输出，跳过Less语法解析流程。

2. 确认外部引入的正确性 #

既然你已经把Bootstrap等CSS移到外部引入，请做好以下检查：

• 在项目的index.html中通过<link>标签正确引入这些CSS文件，确保路径无误
• 在你的.less文件中彻底移除对这些CSS文件的引入，避免重复加载和样式冲突
• 调整外部引入的顺序，确保Bootstrap在自定义Less样式之前加载，避免样式优先级覆盖问题

3. 排查版本兼容性 #

部分版本的less-loader和Bootstrap存在兼容性冲突：

• 尝试降级less-loader到较稳定的版本（比如^7.3.0，这个版本对CSS文件的处理逻辑更宽松）
• 或者升级Bootstrap到最新稳定版，确保它的CSS语法能适配当前less-loader的解析规则

4. 临时修复报错的CSS片段（不推荐长期使用） #

如果以上方法都不生效，你可以临时修改报错的Bootstrap代码：
找到bootstrap.css第2291行的calc()表达式，用Less的转义语法包裹，让Less跳过解析：

padding-right: ~"calc(0.75em + 2.3125rem)";

注意：这种方法需要修改node_modules内的文件，不适合长期维护，建议优先采用前三种方案。

验证修复效果 #

修改完成后，重新执行npm run build命令，确认编译错误是否消失。如果仍有问题，可以检查你的.form-builder-app选择器是否意外包裹了Bootstrap的全局样式，导致样式规则冲突。

内容的提问来源于stack exchange，提问作者Andrew