Quando se fala em Sass e Bootstrap a recomendação/vantagem que mais se encontra por ai é, "importe apenas o que você vai usar, assim seu css final será menor e conterá apenas as partes do bootstrap que você está usando e não o bootstrap todo."
Nossa isso é ótimo mas a "pergunta de um milhão" é como fazer isso?
Aqui no meu caso eu estou usando npm e tenho o boostrap e o sass instalado via npm (bootstrap no node_modules).
No exemplo abaixo eu tenho o html de uma navbar
, no exemplo as classes bootstrap são aplicadas diretamente no html:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#conteudoNavbarSuportado" aria-controls="conteudoNavbarSuportado" aria-expanded="false" aria-label="Alterna navegação">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="conteudoNavbarSuportado">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(página atual)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Ação</a>
<a class="dropdown-item" href="#">Outra ação</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Algo mais aqui</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Desativado</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Pesquisar" aria-label="Pesquisar">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Pesquisar</button>
</form>
</div>
</nav>
Tenho também um arquivo home.sass e home.ts que fazem a importação do bootstrap e gera o arquivo final concatenado via webpack.
home.sass:
@import '~bootstrap';
//Importação para gerar o css
home.ts
import 'bootstrap/dist/js/bootstrap';
//importação do bootstrap.js para gerar o .js final
O exemplo funciona como esperado, mas nesse caso eu estou importando o bootstrap inteiro.
Uma outra critica que fazem é usar as classes do bootstrap diretamente no html, perdendo-se assim a semântica do nome das classes e acaba-se tendo um código html muito poluído, esse código é um exemplo simples de uma navbar tirado da documentação do bootstrap mas eu tenho código de aplicações bem mais poluídos que isso, cheios de py-x, mr-auto, p-0, align-items-x
dentre outras classes.
Infelizmente ao pesquisar eu só encontrei as recomendações, mas nenhum exemplo claro de como implementá-las.