0

Mas adelante quiero modificar el css de Bootstrap mediante scss por eso necesito hacerlo de esta forma.

Buenas quiero integrar Bootstrap a mi proyecto de angular 11 pero este no lo detecta, instale boostrap jquerry y popper con el siguiente comando:

mas adelante quiero modificar el css de Bootstrap mediante scss.

npm install bootstrap jquery @popperjs/core

y añadí este código a angular.json

 "styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/styles.css"
        ],
        "scripts": [
          "node_moydules/jquery/dist/jquery.min.js",
          "node_modules/@popperjs/core/dist/umd/popper.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js"
        ]

Se supone que es así como se integra boostrap, pero este no funciona, este código lo tengo en el app.component para comprobar que esta importado bootstrap

  <router-outlet></router-outlet>
<button class="btn btn-primary">Prueba</button>
4
  • Que es lo que no funciona? Te sale error? No muestra los estilos? Commented el 23 ene. 2021 a las 15:18
  • Seguro que pusiste la referencia a bootrstrap donde debías? A mi me ha pasado que a veces "no sirve" porque lo puse en la sección de production, en lugar de la de development
    – ben
    Commented el 23 ene. 2021 a las 17:30
  • @JuanRivera no muestra ningún error, solamente al poner las clases de bootstrap no se carga su css
    – alV1997
    Commented el 23 ene. 2021 a las 20:20
  • @BenjamínGuzmán tenias razón no me di cuenta . Muchas Gracias!!
    – alV1997
    Commented el 23 ene. 2021 a las 20:31

1 respuesta 1

0

si vas a integrar unicamente minimizado .min no tiene caso instalarlo, puedes agregarlo directamente al archivo src/index.html

<html>
    <head>
        ....
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> 
        ....
    </head>
    <body>
        <app-root></app-root>
    </body>
</html>
1
  • Mas adelante en el proyecto quiero modificar el Bootstrap con scss, así que necesito importarlo así..
    – alV1997
    Commented el 23 ene. 2021 a las 14:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.