Bootstrap es una de las librerías más utilizadas y nos proporciona mucha agilidad en nuestros proyectos, sin embargo, cargar todos sus recursos si no los necesitas puede ser poco beneficioso para el WPO de tu proyecto, una vez descargado por medio de Bower podríamos modificar su contenido para liberar peso de sus recursos, sin embargo a la hora de compartir nuestro proyecto con otros desarrolladores tendríamos que proporcionarle la carpeta de bootstrap modificada.
 
La mejor solución pasa por hacer un override de los componentes que queremos utilizar, de esta forma podemos usar bootstrap sin miedo a que sus recursos pesen más de lo que necesita nuestro proyecto. El siguiente código está basado en la versión 8.5.4 de Sage utilizando como dependencia la versión de Bootstrap 4.1.3.
 
bower.json
 

{
  "name": "sage",
  "homepage": "https://roots.io/sage/",
  "authors": [
    "Ben Word "
  ],
  "license": "MIT",
  "private": true,
  "dependencies": {
    "bootstrap": "4.1.3"
  },
    "overrides": {
    "bootstrap": {
      "main": [
        "./scss/_functions.scss",
        "./scss/_variables.scss",
        "./scss/_mixins.scss",
        "./scss/_root.scss",
        "./scss/_reboot.scss",
        "./scss/_type.scss",
        "./scss/_images.scss",
        "./scss/_code.scss",
        "./scss/_grid.scss",
        "./scss/_tables.scss",
        "./scss/_forms.scss",
        "./scss/_buttons.scss",
        "./scss/_transitions.scss",
        "./scss/_dropdown.scss",
        "./scss/_button-group.scss",
        "./scss/_input-group.scss",
        "./scss/_custom-forms.scss",
        "./scss/_nav.scss",
        "./scss/_navbar.scss",
        "./scss/_card.scss",
        "./scss/_breadcrumb.scss",
        "./scss/_pagination.scss",
        "./scss/_badge.scss",
        "./scss/_jumbotron.scss",
        "./scss/_alert.scss",
        "./scss/_progress.scss",
        "./scss/_media.scss",
        "./scss/_list-group.scss",
        "./scss/_close.scss",
        "./scss/_modal.scss",
        "./scss/_tooltip.scss",
        "./scss/_popover.scss",
        "./scss/_carousel.scss",
        "./scss/_utilities.scss",
        "./scss/_print.scss",
        "./js/dist/alert.js",
        "./js/dist/button.js",
        "./js/dist/carousel.js",
        "./js/dist/collapse.js",
        "./js/dist/dropdown.js",
        "./js/dist/index.js",
        "./js/dist/modal.js",
        "./js/dist/popover.js",
        "./js/dist/scrollspy.js",
        "./js/dist/tab.js",
        "./js/dist/tooltip.js",
        "./js/dist/util.js"
      ]
    }
  }
}

 
Si experimentas problemas con javascript puedes utilizar este otro código
 

{
  "name": "sage",
  "homepage": "https://roots.io/sage/",
  "authors": [
    "Ben Word "
  ],
  "license": "MIT",
  "private": true,
  "dependencies": {
    "bootstrap": "4.1.3"
  },
    "overrides": {
    "bootstrap": {
      "main": [
        "./scss/_functions.scss",
        "./scss/_variables.scss",
        "./scss/_mixins.scss",
        "./scss/_root.scss",
        "./scss/_reboot.scss",
        "./scss/_type.scss",
        "./scss/_images.scss",
        "./scss/_code.scss",
        "./scss/_grid.scss",
        "./scss/_tables.scss",
        "./scss/_forms.scss",
        "./scss/_buttons.scss",
        "./scss/_transitions.scss",
        "./scss/_dropdown.scss",
        "./scss/_button-group.scss",
        "./scss/_input-group.scss",
        "./scss/_custom-forms.scss",
        "./scss/_nav.scss",
        "./scss/_navbar.scss",
        "./scss/_card.scss",
        "./scss/_breadcrumb.scss",
        "./scss/_pagination.scss",
        "./scss/_badge.scss",
        "./scss/_jumbotron.scss",
        "./scss/_alert.scss",
        "./scss/_progress.scss",
        "./scss/_media.scss",
        "./scss/_list-group.scss",
        "./scss/_close.scss",
        "./scss/_modal.scss",
        "./scss/_tooltip.scss",
        "./scss/_popover.scss",
        "./scss/_carousel.scss",
        "./scss/_utilities.scss",
        "./scss/_print.scss",
        "./dist/js/bootstrap.bundle.js"
      ]
    }
  }
}

 

Valoraciones


Sé el primero en valorar

* Tu valoración puede tardar hasta 72 horas en publicarse.

He leido y acepto el Aviso legal y condiciones de uso

CAPTCHA


Utilizamos cookies propias y de terceros para el correcto funcionamiento de la web, personalizar el contenido y mostrar publicidad en función de las preferencias del visitante. Puedes encontrar más información en nuestra Política de cookies.

ACEPTAR
Aviso de cookies