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, Saas, Sylus 등으로 작성된 파일에 링크하는 JSON 형식 파일이며, 이는 웹 브라우저에서 소스 파일에 대한 실시간 디버그를 수행하기위한 것입니다.
CSS 프리 프로세서 란 무엇입니까? 예 : Saas, Less, 스타일러스
프로그래밍 기능을 사용하여 CSS를 강력하고 빠르게 생성하는 CSS 생성기 도구입니다.
왜 Bootstrap 3.x를 사용하여 맵 파일이 누락되었는지 궁금하다면; 올바른 버전이 설치되어 있는지 확인하십시오. 원하는 효과를 얻으려면 3.3.7을로드해야했습니다.
참고 URL : https://stackoverflow.com/questions/21504611/what-are-the-map-files-used-for-in-bootstrap-3-x
'Programing' 카테고리의 다른 글
| '화살표 함수'와 '함수'는 동일하거나 교환 가능합니까? (0) | 2020.02.19 |
|---|---|
| reinterpret_cast는 언제 사용합니까? (0) | 2020.02.19 |
| Machine.Config는 어디에 있습니까? (0) | 2020.02.19 |
| 추상 클래스를 단위 테스트하는 방법 : 스텁으로 확장? (0) | 2020.02.19 |
| 파이썬 여러 줄 문자열에 대한 적절한 들여 쓰기 (0) | 2020.02.19 |