Bootstrap 3.x에서 사용되는 .map 파일은 무엇입니까?

CSS.map 파일 확장자를 가진 폴더 에 두 개의 파일이 포함되어 있습니다. 그들은:

bootstrap-theme.css.map
bootstrap.css.map

그들은 축소 된 파일 인 것처럼 보이지만 나는 그들이 무엇을위한 것인지 모르겠습니다.

에서 크롬 DevTools로의 CSS의 전처리 작업 :

많은 개발자가 Sass, Less 또는 Stylus와 같은 CSS 전처리기를 사용하여 CSS 스타일 시트를 생성합니다. CSS 파일이 생성되므로 CSS 파일을 직접 편집하는 것이 도움이되지 않습니다.

CSS 소스 맵을 지원하는 전 처리기의 경우 DevTools를 사용하면 소스 패널에서 전 처리기 소스 파일을 실시간 편집하고 DevTools를 떠나거나 페이지를 새로 고치지 않고도 결과를 볼 수 있습니다. 생성 된 CSS 파일에서 스타일을 제공하는 요소를 검사하면 요소 패널에 생성 된 .css 파일이 아니라 원본 소스 파일에 대한 링크가 표시됩니다.

오류를 제거하려면 다음에서이 줄을 삭제할 수도 있습니다 bootstrap.css.

/*# sourceMappingURL=bootstrap.css.map */

이들은 소스 맵입니다. 압축 소스 파일과 함께 이들을 제공하십시오. Firefox 및 Chrome과 같은 개발자 도구는 코드가 압축되지 않은 것처럼 디버깅을 위해이를 사용합니다.

부트 스트랩 CSS는 Less로 생성 할 수 있습니다. 지도 파일의 주요 목적은 chrome dev 도구에서 CSS 소스 코드를 적은 소스 코드에 연결하는 데 사용됩니다. chrome dev 도구에서 요소를 검사하는 경우. CSS의 소스 코드를 볼 수 있습니다. 그러나 부트 스트랩 CSS 파일이있는 페이지에 맵 파일을 포함시키는 경우. 검사하려는 요소 스타일에 적용되는 코드가 적습니다.

성능에 영향을 미치지 않으면 서 클라이언트 측 코드를 결합 및 축소 한 후에도 클라이언트 측 코드를 읽을 수 있고 더 중요하게 디버깅 할 수 있기를 희망 한 적이 있습니까? 이제 소스 맵의 마법을 통해 할 수 있습니다.

이 기사에서는 실제 접근 방식을 사용하여 소스 맵에 대해 설명합니다.

여기 나와 같은 파일을 찾는 사람이라면 (나처럼) .mapURL 끝에 추가 하여 찾을 수 있습니다 .

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css.map

사용중인 Bootstrap 버전으로 버전을 교체하십시오.

CSS 맵 파일이란 무엇입니까?

CSS 파일을 소스 파일, 일반적으로 프리 프로세서로 작성된 파일 (즉, Less, Sass, Stylus 등)에 연결하는 JSON 형식 파일입니다. 웹에서 소스 파일에 대한 실시간 디버그를 수행하기위한 것입니다. 브라우저.

CSS 프리 프로세서 란 무엇입니까? 예 : Sass, Less, 스타일러스

프로그래밍 기능을 사용하여 CSS를 강력하고 빠르게 생성하는 CSS 생성기 도구입니다.

왜 Bootstrap 3.x를 사용하여 맵 파일이 누락되었는지 궁금하다면; 올바른 버전이 설치되어 있는지 확인하십시오. 원하는 효과를 얻으려면 3.3.7을로드해야했습니다.