Less 被编译并打包成一个大的
Less is compiled and bundled into one big
有多个 .less 文件被编译，然后作为一个大的 .css 文件提供给页面。
我想在浏览器中（在整个页面加载后），只显示页面上正在使用的 css。
此外，我希望显示 less 的源映射，以便我可以在浏览器中调试 less 文件，仅调试 .less 文件或更好，突出显示该特定页面上正在使用的 .less 行。
这是我正在考虑的一种可能情况。
我们有 https://github.com/giakki/uncss 从 html 页面中删除未使用的 css。
很好。
现在 css 被删除后，我希望 remaning css 以某种方式映射回 .less。
然后一旦我调试，我将在那个页面上只看到使用过的 .less。
谢谢。
There are multiple .less files that are compiled and then served to
the page as a big .css file.
I would like in the browser to ( after the entire page loads ), only
show css that is being used on the page.
这是故意的。由于您使用的是 CSS 预处理器，因此实际提供给最终用户的是从 Less 编译的 CSS 代码——而不是 Less 代码本身。什么 Less 代码被编译成什么 CSS 的决定都是服务器端的。如果您看到所有这些 .less 文件都被编译成一个大的 .css 文件，那么这就是服务器为您提供服务的方式（或者如果您在开发环境）。
Furthemore I would like that a sourcemap of less be shown so i may debug the less files in the browser, only the .less files or better yet, highlight the .less lines that are being used on that specific page.
您几乎可以完全按照自己的意愿进行设置。 Less 的实时编辑可以在 Firefox 和 Chrome 中设置。有关如何针对 Firefox 和 Google Chrome 进行设置的更多信息，请参阅以下链接：
我知道对于 Firefox，您必须手动启用源地图。完成此操作后，Firefox 还将向您显示与 CSS pane 中的单个 HTML 元素（您检查的）相对应的较少样式。因此，这至少可以帮助您了解哪些较少的规则适用于单个元素——如果不是整个页面的话。
Chrome 59 添加了一个 CSS 和 JS 覆盖工具，应该可以帮助您找出正在使用的样式和未使用的样式。您也许可以使用插件从 Firefox 中获得类似的功能。然而，这可能只适用于普通 CSS 和 JS——而不是 Less。参见：
您可能要搜索的关键字有 "CSS coverage"、"Live editing of Less in-browser" 等
编辑：我在您编辑问题后添加此内容。我会检查：
这将清理 CSS。然后如本期所述，您可以比较脏源映射与纯化源映射 CSS 以获得 'clean' 更少的代码：
有多个 .less 文件被编译，然后作为一个大的 .css 文件提供给页面。
我想在浏览器中（在整个页面加载后），只显示页面上正在使用的 css。
此外，我希望显示 less 的源映射，以便我可以在浏览器中调试 less 文件，仅调试 .less 文件或更好，突出显示该特定页面上正在使用的 .less 行。
这是我正在考虑的一种可能情况。
我们有 https://github.com/giakki/uncss 从 html 页面中删除未使用的 css。
很好。
现在 css 被删除后，我希望 remaning css 以某种方式映射回 .less。
然后一旦我调试，我将在那个页面上只看到使用过的 .less。
谢谢。
There are multiple .less files that are compiled and then served to the page as a big .css file.
I would like in the browser to ( after the entire page loads ), only show css that is being used on the page.
这是故意的。由于您使用的是 CSS 预处理器，因此实际提供给最终用户的是从 Less 编译的 CSS 代码——而不是 Less 代码本身。什么 Less 代码被编译成什么 CSS 的决定都是服务器端的。如果您看到所有这些 .less 文件都被编译成一个大的 .css 文件，那么这就是服务器为您提供服务的方式（或者如果您在开发环境）。
Furthemore I would like that a sourcemap of less be shown so i may debug the less files in the browser, only the .less files or better yet, highlight the .less lines that are being used on that specific page.
您几乎可以完全按照自己的意愿进行设置。 Less 的实时编辑可以在 Firefox 和 Chrome 中设置。有关如何针对 Firefox 和 Google Chrome 进行设置的更多信息，请参阅以下链接：
我知道对于 Firefox，您必须手动启用源地图。完成此操作后，Firefox 还将向您显示与 CSS pane 中的单个 HTML 元素（您检查的）相对应的较少样式。因此，这至少可以帮助您了解哪些较少的规则适用于单个元素——如果不是整个页面的话。
Chrome 59 添加了一个 CSS 和 JS 覆盖工具，应该可以帮助您找出正在使用的样式和未使用的样式。您也许可以使用插件从 Firefox 中获得类似的功能。然而，这可能只适用于普通 CSS 和 JS——而不是 Less。参见：
您可能要搜索的关键字有 "CSS coverage"、"Live editing of Less in-browser" 等
编辑：我在您编辑问题后添加此内容。我会检查：
这将清理 CSS。然后如本期所述，您可以比较脏源映射与纯化源映射 CSS 以获得 'clean' 更少的代码：