Nao consigo adicionar bootstrap no projeto Angular

5 de maio de 2021 5 respostas

Dayson 5 de maio de 2021

To aprendendo Angular, e estou tentando adiconar Bootstrap no projeto.

Passos que eu fiz:
Instalando Bootstrap

npm install bootstrap@4 --save

Adicionando bootstrap no arquivo angular.json

"styles": [
          "src/styles.sass",
          "../node_modules/bootstrap/dist/css/bootstrap.css"
        ],

Por fim, adicionando um exemplo para testar. Mas nao funciona, e não vejo nenhum erro no console.

<div class="container">
    <h1>
        <span class="badge bg-primary">Primary</span>
        <span class="badge bg-secondary">Secondary</span>
        <span class="badge bg-success">Success</span>
        <span class="badge bg-danger">Danger</span>
        <span class="badge bg-warning text-dark">Warning</span>
        <span class="badge bg-info text-dark">Info</span>
        <span class="badge bg-light text-dark">Light</span>
        <span class="badge bg-dark">Dark</span>
    </h1>
</div>

5 Respostas

Lucas_Camara 5 de mai. de 2021

Em vez de:

"../node_modules/bootstrap/dist/css/bootstrap.css"

Tente apenas:

"node_modules/bootstrap/dist/css/bootstrap.css"

Dayson 5 de mai. de 2021

Já tentei! nada ainda. Inclusive coloquei até o Path completo e nada tbm.

wldomiciano 5 de mai. de 2021

Vc adicionou no "styles" certo? É que tem 2 lugares. Esse é o lugar certo:

Screenshot%20from%202021-05-05%2013-50-28

Esse é o errado:

Screenshot%20from%202021-05-05%2013-50-55

Dayson 5 de mai. de 2021

Opa! Obrigado pela ajudar. Percebi mesmo…
Sinceramente, não sei onde estou errado.

"root": "",
  "sourceRoot": "src",
  "prefix": "app",
  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "dist/aprendendo",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "tsconfig.app.json",
        "aot": true,
        "assets": [
          "src/favicon.ico",
          "src/assets"
        ],
        "styles": [
          "src/styles.sass",
          "node_modules/bootstrap/dist/css/bootstrap.min.css"
         
        ],
        "scripts": []
      }

wldomiciano 5 de mai. de 2021

Posso ver todo o seu packages.json?
EDIT: Eu pedi pra ver o packages.json só para confirmar que o Bootstrap foi realmente instalado, mas fiz uns testes aqui e percebi que se não estivesse instalado, quando vc rodasse npm start ia dar erro logo de cara porque o Angular não ia encontrar o arquivo node_modules/bootstrap/dist/css/bootstrap.min.css. Então deve ser outra coisa.

Criado 5 de maio de 2021

Ultima resposta 5 de mai. de 2021

Respostas 5

Participantes 3

5 Respostas

Topicos relacionados