Less.js: 소스 맵 선택기의 잘못된 줄 번호 - 크롬은 마지막 요소가 아닌 첫 번째 요소의 위치를 ​​보고합니다.

나는 이것이 less가 실제로 다른 곳에서 오는 선택기의 다른 부분을 표시하기 때문이라고 생각합니다. 그래서 크롬에게 선택기의 첫 번째 부분은 3행에서, 두 번째 부분은 9행에서 온다는 것을 알려줍니다. less가 & 실제로 구현을 중단하고 두 번째 부분에 대해서만 크롬에 알려줍니다.

그러나 크롬의 정보는 어쨌든 매우 간략하므로 선택기의 마지막 부분에서만 정보를 표시해야 합니다.

이 버그는 이제 크롬 버그에 있습니다. https://code.google.com/p/chromium/issues/detail?id=287382

참고 사항: 각 경로가 출력되기 전에 fileinfo를 재정의하여 해결할 수 있습니다. 또한 중간 선택자가 대체되는 확장에 대해 생각할 필요가 있습니다. 확장으로 인해 경로가 생성되므로 확장이 중요합니다.

항상 아래로 스크롤할 수 있으므로 이 값을 낮게 표시합니다. 최소한 포인터를 제공합니다. @dotnetwise 가 아니라면

참고: #1715의 해결 방법은 선택기가 아닌 속성을 제어하고 클릭하는 것입니다.
참고 2: 크롬은 이 문제를 수정하지 않을 것이므로 더 적은 시간에 해결해야 합니다. 아마도 마지막 요소 색인을 찾는 것일까요? 선택기에서

http://stackoverflow.com/questions/27983598/css-source-maps-doesnt-report-the-correct-line-when-using-nested-selectors 에서 예제 코드를 테스트했습니다

#main {
max-width: 500px;
color: white;
.sub-container {
color: blue;
}
}

나는 문제가 크롬뿐만 아니라 파이어 폭스에서도 발생한다는 것을 발견했습니다. 그런 다음 gulp-less 및 gulp-sourcemap을 사용하여 코드를 컴파일하려고 했습니다(gulp-sourcemap이 다른 소스맵 생성기를 사용할 것으로 예상됨). 꿀꺽 빌드도 문제를 해결하지 못했습니다.
sass를 사용하여 동일한 코드를 컴파일할 때 생성된 소스 맵은 크롬과 FF 모두에서 4를 올바르게 가리킵니다.

반면 Less는 특정 지점에서 올바른 줄 번호를 가지고 있습니다(--line-numbers=comments 포함).

/* line 1, /t.less */
#main {
  max-width: 500px;
  color: white;
}
/* line 4, /t.less */
#main .sub-container {
  color: blue;
}

예, 하지만 "중첩된 규칙"이 아닌 경우에만

큰 규칙에 무언가를 중첩하면 모든 소스맵 행이 맨 위를 가리킵니다.