Hasta el momento, venía utilizando bootstrap vía CDN, pero ya que estoy usando Sass, aprovecho de personalizarlo agregando las fuentes al proyecto.
En mi caso voy a crear un nuevo directorio en _sass/bootstrap. Esta carpeta contendrá todos los archivos fuentes de sass de bootstrap, separado de mis archivos personalizado. De la carpeta comprimida sólo me interesa bootstrap-5.3.3/scss/ que contiene los archivos necesarios.
La distribución en el proyecto ahora se ve así:
1
2
3
4
5
6
7
8
9
10
11
📂 _sass
│── 📂 bootstrap
│ │─ 📂 form
│ │─ 📂 helpers
│ │─ 📂 mixins
│ │─ 📂 vendor
│ └─ 📂 utilities
└── base.scss
📂 assets
└── 📂 css
└─ main.scss
La forma más sencilla de usar los archivos fuentes dentro de Jekyll es importar el bootstrap.scss desde el archivo de entrada main.scss, de esa forma se importa todos los archivos Sass restantes de Bootstrap en el orden correcto. El archivo actualizado main.scss ahora tiene el siguiente aspecto:
1
2
3
4
---
---
@import "bootstrap/bootstrap";
@import "base";
Ojo: El orden importa, bootstrap debe importarse antes que los estilos personalizados. De lo contrario, el proceso de compilación fallará.
En este punto, los archivos de Bootstrap ya están integrados en mi proyecto de Jekyll. Al reconstruir el proyecto, se aplicaron los estilos de Bootstrap de forma predeterminada. Para verificar que las variables, mixins y otras características de bootstrap se puede usar el archivo base.scss y hacer algo como lo siguiente:
1
2
3
4
5
6
7
$primary: #89A55D;
h1 {
text-align: center;
color: $primary;
background-color: $secondary;
}
En lugar de importar todos los archivos sass de bootstrap, puedo importar sólo los archivos que realmente necesito. En este caso, el orden de las importaciones importa:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
---
---
@import "bootstrap/functions";
// 2. Include any default variable overrides here
$primary: #89A55D;
// 3. Include remainder of required Bootstrap stylesheets
@import "bootstrap/variables";
@import "bootstrap/mixins";
@import "bootstrap/root";
// 4. Include any optional Bootstrap CSS as needed
@import "bootstrap/utilities";
@import "bootstrap/reboot";
@import "bootstrap/containers";
@import "bootstrap/forms";
@import "bootstrap/buttons";
@import "bootstrap/transitions";
@import "bootstrap/dropdown";
@import "bootstrap/nav";
@import "bootstrap/navbar";
// 5. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "bootstrap/utilities/api";
// 6. Additional custom code
@import "base";
El primer archivo que se debe importar es functions.scss ya que es necesario para procesar el código fuente correctamente.