2013-07-16 4 views
1

나는 Chrome에서 Sass 소스 맵을 사용하기 위해 찾을 수있는 모든 지침을 따랐으며, 여전히 실패하고 있습니다. 나는 어떻게 말할 수 없다 - 아마 너는 할 수 있니?Chrome의 Sass 소스 맵이 작동하지 않습니다. Flummoxed

Sass 3.3.0.alpha198 ("출혈 가장자리"라고 말하면서) 컴파일 된 CSS 옆에 사이트가있는 소스 맵 파일()을 생성하고 있습니다. 컴파일 된 CSS의 맨 아래 줄에는 /*# sourceMappingURL=test.css.map */이 있습니다. 그 단계가 잘 진행되고있는 것 같습니다. 크롬 카나리아 내

, 나는 chrome://flags에 갔다 및 개발자 도구 실험을 사용할 수있다. 나는 다시 시작했다. 내 관리자 인 설정 내에서 일반 탭에서 "소스 맵 사용"을 선택했습니다. 실험 탭에서 "Sass 스타일 시트 디버깅"을 선택했습니다.

후 위의 모든, 나는 여전히 예전의 컴파일 된 CSS 파일에 링크, 예전 CSS의 줄 번호를 부여하고 (컴파일 된 CSS를 액세스 로컬 HTML 파일에) 요소를 검사 할 때. 소스 맵 지원에 대한 표시가 없습니다. 자습서에서 말하는 것이 아닙니다.

(안정 크롬에서도이 도구를 사용해 보았습니다 - 개발자 도구 실험을 사용하고 "소스 맵 사용"및 "새시 지원"확인란을 선택하여 안정적인 환경에서 작동해야합니까? 중.)

누군가가 내가 부족 걸 말해 주시겠습니까?

답변

3

file : // URL에서 페이지를로드하고 있습니까? 보안상의 이유로 작동하지 않습니다 - localhost에서 http 서버를 사용하십시오.

또한, 귀하의 카나리아를 업데이트하는 것은 좋은 생각입니다; CSS 소스 맵은 실험에서 제외되었습니다. 일반 설정에서 "CSS 소스 맵 사용"을 선택해야합니다. 경우

+0

감사합니다 - 나는 실종 된 지식 나는 그들이 HTTP를 통해 제공하는 것으로, 지역 정적 파일에서 sourcemaps를 사용할 수없는 것이 었습니다. 이제 작동합니다. – davidtheclark

0

은 다른 사람이 말대꾸를 위해 크롬에서 소스 맵을 사용하기 위해, 여기 끝, 먼저 그들을 생성하는 --sourcemap 플래그를 사용해야합니다!

sass --watch --sourcemap --debug-in sass/screen.scss:screen.css 

상세 정보 : https://developers.google.com/chrome-developer-tools/docs/tips-and-tricks#debugging-sass

+0

이 답변에 대한 업데이트 : 인수가없는'--sourcemap' 플래그 **는 공식적으로 사용되지 않습니다. SASS가'auto','file','inline' 또는'none' 중 하나의 소스 맵을 생성해야합니다. 명령 줄 도움말에서 : 소스 파일에 생성 된 출력을 연결하는 방법 --sourcemap = TYPE. 자동 (기본값) : 가능한 경우 상대 경로, 다른 위치의 파일 URI 파일 : 항상 절대 파일 URI 인라인 : 소스 맵에 소스 텍스트 포함 none : 소스 맵 없음 – Pierce

관련 문제