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

Utilizamos cookies propias y de terceros para personalizar el contenido y los anuncios, ofrecer funciones de medios sociales y analizar el tráfico. Además compartimos información sobre el uso que haces de nuestra web con nuestros partners de medios sociales, de publicidad y de análisis web. Si continúas navegando estás dando tu consentimiento para la aceptación de nuestra Política de cookies.

ACEPTAR
Aviso de cookies