Para nuestro caso vamos a usar un nuevo kit que permite integrar fácilmente Bootstrap 4 con NPM desde Visual Studio con ASP Core para la creación de temas personalizados.
Pre-requisitos
-
Visual Studio 2017 instalado y actualizado.
-
Web Essentials instalado.
Preparando el proyecto
-
Crearemos un nuevo proyecto Web en Visual Studio 2017. El StarterKit que usaremos está optimizado para aplicaciones ASP Core 2.1 MVC, puedes encontrar diferencias en esta guía si utilizas otras versiones de ASP Core. El Kit no es compatible con ASP Net Framework.
-
Vamos a limpiar algunos archivos innecesarios, asi que puede remover las siguientes carpetas:
Descargando Bootstrap4.VisualStudio.StarterKit
-
Navegamos hasta https://github.com/equilaterus/Bootstrap4.VisualStudio.StarterKit/ y descargamos el repositorio como ZIP.
-
Abrimos la carpeta donde se encuentra nuestro proyecto. Podemos hacerlo desde Visual Studio (sólo hay que tener en cuenta hacer clic derecho en el proyecto y NO en la solución).
-
Copiamos los archivos que están dentro del ZIP en la carpeta kit que previamente descargamos desde el repositorio. Se nos preguntará para sobreescribir algunos archivos, decimos que sí. Al final debería verse más o menos así:
Pasos finales
-
Volvemos a nuestro Visual Studio (es recomendado cerrar y reabrir el proyecto antes de proseguir).
-
Restauramos los paquetes NPM que nos descargarán jQuery y Bootstrap 4.
-
Recompilamos el archivo SCSS que está ubicado en wwwroot/scss/theme.scss para generar los archivos CSS (luego de este paso, los archivos se recompilarán automáticamente cada vez que modifiquemos el archivo).
-
Activamos el Bundle on Build para que automáticamente se minifiquen los archivos y se obtengan las librerías de terceros dentro de nuestro proyecto.
-
Ahora sòlo es cuestión de modificar estos archivos para crear un tema único e increíble.
¡Hasta la próxima!
