Dayson
Maio 5, 2021, 12:14am
#1
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>
Em vez de:
"../node_modules/bootstrap/dist/css/bootstrap.css"
Tente apenas:
"node_modules/bootstrap/dist/css/bootstrap.css"
Dayson
Maio 5, 2021, 4:33pm
#3
Já tentei! nada ainda. Inclusive coloquei até o Path completo e nada tbm.
Vc adicionou no "styles"
certo? É que tem 2 lugares. Esse é o lugar certo:
Esse é o errado:
Dayson
Maio 5, 2021, 9:20pm
#5
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": []
}
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.