1
resposta

import do Bootstrap no Angular

Olá pessoal , segui o passo a passo que o professor orientou para fazer o import do Bootstrap no Angular mas para mim deu erro ...

A mensagem é a seguinte : "styles": não é reconhecido como um comando interno

C:\Users\usuario\Desktop\alurapic> "src/styles.css",

C:\Users\usuario\Desktop\alurapic> "./node_modules/bootstrap/dist/css/bootstrap.min.css"

Alguém poderia me dar uma dica de como resolver isto ?

1 resposta

Olá Eduardo, tudo bem com você?

Peço desculpas pela demora em obter um retorno.

Para adicionar o bootstrap ao nosso projeto, não precisamos digitar o caminho do arquivo no terminal, por isto o erro de comando desconhecido está sendo gerado. Em contrapartida, para adicionar corretamente o bootstrap ao projeto, vá até o arquivo angular.json que está localizada na pasta raiz do projeto , procure as propriedades styles e adicione o caminho do bootstrap que foi baixado, como mostro abaixo:

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

Após isto, pare a execução da aplicação e inicie novamente através do comando ng serve.

Todavia, outra opção, é utilizar o Bootstrap via CDN, que nada mais é que um serviço que fornece links para os arquivos CSS e JavaScript do framework Bootstrap, permitindo que você adicione rapidamente o Bootstrap em seu projeto, sem precisar hospedar os arquivos em seu próprio servidor. Para isso, acesse o arquivo index.html que fica na raiz da pasta src e adicione os códigos de importação abaixo dentro da tag head:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Para testar o funcionamento, dentro de algum componente HTML do seu projeto, realize o teste importando alguma classe do Bootstrap, por exemplo:

<div class="alert alert-primary" role="alert">
  Um alerta simples e primário - confira!
</div>

Como resultado, você verá um alerta azul com fundo azul na tela, como mostrado abaixo:

Imagem com fundo azul escrito "Um alerta simples e primário - confira!", que tem a classe alert alert-primary do Boostrap

Espero ter ajudado. Continue mergulhando em conhecimento e não hesite em voltar ao fórum para continuar aprendendo e interagindo com a comunidade.

Em caso de dúvidas estou à disposição.

Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software