Antes de ler esta postagem no blog, sugiro que você dê uma olhada na seguinte postagem no blog:
https://blog.csdn.net/wenhao_ir/article/details/132089650
Bootstrap compilado (compactado) código-fonte Baidu endereço de download do disco de rede:
https://pan.baidu.com/s/14BM9gpC3K-LKxhyLGh4J9Q?pwd=m02m
Bootstrap código-fonte descompilado (compactado) Endereço de download do disco de rede Baidu:
https://pan.baidu.com/s/19U-13-sgPDHCI0FozreFdQ?pwd=b9m1
Em projetos web, quando utilizamos o Bootstrap para desenvolver conteúdo front-end, geralmente nos referimos à versão compilada do arquivo, conforme a figura a seguir:
mas o código-fonte desses arquivos css foi compilado e compactado. diretamente, basicamente as pessoas são ilegíveis, no dialeto de Sichuan, é realmente "pegajoso", não suporto olhar diretamente para ele, conforme mostrado na figura abaixo:
Então, o que devo fazer? Neste momento, podemos usar o arquivo de mapa de suporte oficial para executar o antimapeamento antes da compilação, de modo a obter um código-fonte fácil de ler, conforme mostrado na figura abaixo: Então, como ver o código-fonte fácil de ler arquivo de código através do arquivo Source Map (mapeamento de origem)
?
É muito simples, basta colocar o arquivo css e o arquivo css.map correspondente no mesmo arquivo, abrir o arquivo HTML correspondente no navegador, entrar no modo de desenvolvedor e visualizar o arquivo de código-fonte fácil de ler.
O exemplo é o seguinte:
coloque os três arquivos a seguir no diretório "E:\HTML_3":
css-map-test.html
bootstrap.min.css
bootstrap.min.css.map
Os links de download do disco de rede Baidu para esses três arquivos são os seguintes:
https://pan.baidu.com/s/1ydZiOKESZydtDXuNiNN0Hg?pwd=ppsi
O conteúdo do arquivo css-map-test.html é o seguinte:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<div class="container">
<p>我要测试Source Map(源映射)文件的效果。</p>
</div>
</body>
</html>
Abra o arquivo css-map-test.html no navegador chorm e entre no modo de desenvolvimento através de F12 ou clique com o botão direito → "Inspecionar elemento".
Através dos Estilos de Elementos, você pode visualizar o código-fonte do elemento correspondente e sua posição no código-fonte antes da compilação, conforme mostrado na figura a seguir: o arquivo de código-fonte à direita na captura de tela superior direita, você pode pular
para o código-fonte específico:
Entramos na opção Sources, abrimos o arquivo bootstrap.css e procuramos por ".container" para encontrar a definição do selector.container:
Se você quiser entender o significado da pasta scss na captura de tela acima, faça o download do código completo de bootstrap Você saberá, conforme a figura abaixo:
