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

443

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.

twitter-bootstrap-3 source-maps wetjosh
fonte

Respostas:

448

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.

Steve Jansen
fonte
11
Esta resposta explica que eles são usados ​​em conjunto com os pré-processadores CSS - algo que ainda não explorei muito. Obrigado
wetjosh
21
Parece que estes são análogos para depurar símbolos em uma linguagem de programação, não?
21714 Chris Chris Simmons
1
Eu estava recebendo o erro js, ​​então criei um arquivo falso nesse diretório para impedir a exibição do erro.
3
@IssaFarax Você pode desativar o carregamento de mapas de origem nas configurações das ferramentas do ChromeDev. DevTools abertos> Clique na roda dentada de definições> Desmarque a opção Ativar (JavaScript | CSS) mapas de origem
Giles Wells
você também pode ref: stackoverflow.com/questions/21766880/…
Vivek Panday
173

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

/*# sourceMappingURL=bootstrap.css.map */
LeonardChallis
fonte
52
Ou apenas o hash #e ele se transformará em um comentário simples, caso você queira mais tarde.
precisa saber é
1
Se removermos isso bootstrap.css, isso causa algum erro ou tipo de coisa?
Harry Suren
4
Não, não faz. Isso apenas torna mais difícil a depuração.
Gfra54
1
Você não deseja isso para o ambiente de produção; portanto, compile-o adequadamente ( gulp --productionse você usar gulp, isso não incluirá a linha sourceMapping) e exclua os arquivos * .map dos seus uploads para o servidor de produção.
Curvian Vynes
2
Que erro? A pergunta não menciona um erro.
precisa saber é o seguinte
70

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.

davidism
fonte
9

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.

Joe.wang
fonte
8

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.

Marcio Mazzucato
fonte
5

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.

Shadi Namrouti
fonte
1
Eles devem ser tratados como arquivos de texto ou fluxos de bytes? Eles deveriam terminar \n?
Aaron Franke
@AaronFranke São arquivos de texto. Sugiro que você copie o conteúdo de um arquivo .map e cole-o no jsonblob.com para ver os pares de chave / valor JSON
Shadi Namrouti
-1

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.

TheJoe
fonte