요소를 검사하는 동안 CSS 파일 만 표시되는 이유는 무엇입니까?

Question

처음 웹 개발 중에 크롬 브라우저에서 요소를 검사 할 때 해당 스타일이있는 정확한 scss (CSS 사전 처리기) 파일을 표시하는 데 사용되었습니다. 그것은 매우 도움이되었습니다. 하지만 지금은 요소를 검사 할 때 계산 된 css 파일 만 보여줍니다. 내 브라우저에서 무슨 일이 일어 났는지 정확하게 파악할 수는 없습니다. 설정을 변경해야합니까? 친절하게 해결책을 제안하십시오.

Answer 1

당신은 아마 Chrome Devtools Docs에서 소스 맵 파일 (.map)

을 놓치고 : CSS 소스 맵을 지원 처리기를 들어

는 개발자 도구는 당신에게 라이브 편집하여 처리기 소스 파일을 할 수 있습니다 소스 패널에서 DevTools를 종료하거나 페이지를 새로 고치지 않고도 결과를 볼 수 있습니다. 생성 된 CSS 파일에 의해 스타일이 제공되는 요소를 검사하면 요소 패널에 생성 된 .css 파일이 아닌 원래 소스 파일에 대한 링크가 표시됩니다. 크롬이 활성화 특색 경우

확인 :

CSS 소스 맵은 기본적으로 활성화되어 있습니다. 생성 된 CSS 파일을 자동으로 다시로드하도록 선택할 수 있습니다.

는 CSS 소스지도와 CSS를 다시로드를 사용하려면 다음

1. 열기 DevTools로 설정하고 일반을 클릭합니다.

2. CSS 소스 맵 사용 및 CSS 자동 생성 기능을 사용하도록 설정합니다. SCSS 또한, 맵 파일을 생성하는 파일은 당신이 당신의 SCSS 코드를 컴파일 할 때마다 작성되어 있는지 확인하기 위해 IDE 설정을 확인 지원

대부분의 현대 십오.

style.scss compiles into: 
|_ style.css 
|_ style.css.map