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 ?
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:
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!