对于使用 Web Essentials 2013 (2.5.3) 的 ASP.Net MVC 项目,如何配置 LESS 源映射以与 Chrome 一起使用?

How do I configure LESS source mapping to work with Chrome for a ASP.Net MVC project that uses Web Essentials 2013 (2.5.3)?

在Visual Studio2013年Tools > Options > Web Essentials > Less下设置如下:

在Visual Studio2013 中查看Web Essentials 2013 提供的并排视图的.less 文件,编译后的版本在底部有一个源映射link:

但是,当 运行 解决方案和加载 Chrome 时,我所看到的只是 .less 文件的编译版本:

Chrome 开发者工具设置显示正确:

所以不要认为这是问题所在。根据 Rob Dodson,选择元素后单击行号的预期结果是看到未编译的 .less,如下所示:

这可能是捆绑问题吗?也没有运气调查过。

也许您应该在 WebEssential 扩展中启用 BrowserLink 功能。在我的工作区中,此设置位于“Start debug”按钮和“Configuration manager

之间的标准栏中

我遇到了与您类似的问题,以下是我发现的问题,包括解决方法:

  1. Web Essentials 2013 (WE2013) 生成文件名格式为 $filename$.map 的地图文件。因此,如果说您的文件名为 global.less,WE2013 将生成一个 global.css.map 文件。

  2. Chrome Dev Tools 在您生成的 css 文件末尾查找引用映射文件的注释。例如:/*# sourceMappingURL=global.css.map */

  3. 不幸的是,Chrome Dev Tools 在包含与生成的 css 文件(在本例中为 global.css)同名的地图文件上阻塞。如果您手动将地图文件名从 global.css.map 更改为 global.less.map,这将正常工作。您必须记住将生成的 global.css 文件中的注释行修改为 /*# sourceMappingURL=global.less.map */

  4. 这显然不是解决 chrome 开发工具中 less 文件故障的理想工作流程,但我希望 WE2013 的人会发布一个补丁,允许地图文件名由用户指定,或自动生成格式为 filename.less.map 的格式。不过,在此之前,如果您仍然投资于 WE2013,那么您可以使用上面的解决方法来解决这个问题。