1

Não estou conseguindo utilizar o Bootstrap com o Angular CLI. Estou utilizando o ng-bootstrap e estou seguindo todas as recomendações do site, porém sem exito, alguém conhece como utilizar?

instalação via npm:

npm install --save @ng-bootstrap/ng-bootstrap

importando no módulo principal, com o .forRoot():

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
   declarations: [AppComponent, ...],
   imports: [NgbModule.forRoot(), ...],
   bootstrap: [AppComponent]
})
export class AppModule {}

importando no módulo com o componente que estou utilizando:

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
   declarations: [OtherComponent, ...],
   imports: [NgbModule, ...]
})
export class MeuModule {}
2
  • "porém sem exito" ... Descreva seu problema! Pois alguém pode fazer o teste e funcionar.. Então está retornando algum erro ?
    – NoobSaibot
    7/04/2018 às 2:38
  • Não retorna nenhum erro não, só não funciona nenhum CSS do Bootstrap. Nenhum estilo.
    – LeAndrade
    8/04/2018 às 12:56

3 Respostas 3

1

Você precisa adicionar o Bootstrap em seu projeto:

npm install bootstrap@4 --save

depois editar o arquivo .angular-cli.json:

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

Fonte: ng-bootstrap's css folder does not exist

0

Ok. O problema aqui é que te esqueces-te de adicionar o css ao teu themese :D

no teu main.scss (ou equivalente) só tens que importar o scss do bootstrap:

// main.scss

// 3rd party libraries
@import "~bootstrap/scss/bootstrap";

e os estilos do bootstrap passam a estar na tua folha de estilos

0

Use o comando npm install bootstrap --save, e adicione a linha:

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

como no exemplo abaixo:

"build": { 
    "options": {
        "styles": [
            "../node_modules/bootstrap/dist/css/bootstrap.min.css",(adicionar essa inha no angular.json)
            "styles.css"
        ],
    }
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .