para que servem os arquivos .map usados ​​no Bootstrap 3.x?

Existem dois arquivos incluídos na CSSpasta com extensões de arquivo .map. Eles são:

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

Eles parecem arquivos compactados, mas não sei para que servem.

De Trabalhando com pré-processadores CSS no Chrome DevTools :

Muitos desenvolvedores geram folhas de estilo CSS usando um pré-processador CSS, como Sass, Less ou Stylus. Como os arquivos CSS são gerados, a edição direta dos arquivos CSS não é tão útil.

Para pré-processadores que suportam mapas de origem CSS, o DevTools permite editar ao vivo seus arquivos de origem do pré-processador no painel Fontes e exibir os resultados sem precisar sair do DevTools ou atualizar a página. Quando você inspeciona um elemento cujos estilos são fornecidos por um arquivo CSS gerado, o painel Elementos exibe um link para o arquivo de origem original, não para o arquivo .css gerado.

Se você deseja apenas se livrar do erro, também pode excluir esta linha bootstrap.css:

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

Estes são mapas de origem. Forneça-os juntamente com os arquivos de origem compactados; ferramentas de desenvolvedor como as do Firefox e Chrome as usarão para permitir a depuração como se o código não estivesse compactado.

O css de autoinicialização pode ser gerado por Menos. O principal objetivo do arquivo de mapa é usado para vincular o código-fonte css a menos código-fonte na ferramenta dev do chrome. Como costumávamos fazer. Se inspecionarmos o elemento na ferramenta de desenvolvimento chrome. você pode ver o código fonte do css. Mas se incluir o arquivo de mapa na página com o arquivo css de autoinicialização. você pode ver o menor código que se aplica ao estilo do elemento que você deseja inspecionar.

Você já desejou poder manter seu código do lado do cliente legível e mais importante depurável, mesmo depois de combiná-lo e minimizá-lo, sem afetar o desempenho? Bem, agora você pode através da magia dos mapas de origem.

Este artigo explica os Mapas de origem usando uma abordagem prática.

Para quem veio aqui procurando esses arquivos (como eu), geralmente é possível encontrá-los adicionando .mapao final do URL:

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

Certifique-se de substituir a versão por qualquer versão do Bootstrap que você estiver usando.

O que é um arquivo de mapa CSS?

É um arquivo no formato JSON que vincula o arquivo CSS aos seus arquivos de origem, normalmente arquivos escritos em pré-processadores (ou seja, Less, Sass, Stylus etc.), para fazer uma depuração ao vivo dos arquivos de origem da Web navegador.

O que é o pré-processador CSS? Exemplos: Sass, Menos, Stylus

É uma ferramenta geradora de CSS que usa o poder de programação para gerar CSS de maneira robusta e rápida.

Se você está se perguntando por que está faltando os arquivos de mapa com o Bootstrap 3.x; verifique se você tem a versão correta instalada. Eu tive que carregar o 3.3.7 para obter o efeito desejado que estava procurando.