Добавление Bootstrap к Angular 8 - PullRequest
Новая
       4

Добавление Bootstrap к Angular 8

1 голос
/ 04 мая 2020

Я пытаюсь добавить Bootstrap в свое приложение Angular. Я новичок в этом, и хотя после выполнения необходимых шагов у меня возникли проблемы с установкой bootstrap.

  1. Я выполнил все необходимые шаги, начиная с установки Angular cli, ng new first -app и ng serve.

  2. Я открыл терминал кода vs и попытался установить bootstrap, используя

    npm install bootstrap --save

  3. Затем добавляем это в стиль. css

    @ import "~ bootstrap / dist / css / bootstrap. css"

Но все же, когда я нажимаю на ссылку, наведенную на вышеуказанный фрагмент кода, он сообщает, что не может найти файл, и предлагает создать файл с этим путем.

Ответы [ 3 ]

1 голос
/ 04 мая 2020

Если вы просто хотите добавить стили из bootstrap, в файле angular. json есть свойство, которое позволяет вам включать его в сборку. 

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "projects": {
    "yourproject": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "src/styles.scss",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ]
          },
        ...

См.: https://angular.io/guide/workspace-config#styles -and-scripts-configuration

0 голосов
/ 16 мая 2020

Простой способ добавить bootstrap - использовать Angular CLI (npm install).

Из интерфейса командной строки установить bootstrap и указать его в angular. json

npm install bootstrap --save
0 голосов
/ 04 мая 2020

Добро пожаловать в StackOverflow!

Bootstrap не является кодом TypeScript, поэтому вы не импортируете его как таковой. Вместо этого это код CSS, и поэтому вы хотите импортировать его в свой index.html файл как

Вот как я импортирую boostrap в свои приложения - ниже идет тег <head> of index.html

<link
  rel="stylesheet"
  href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
  integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
  crossorigin="anonymous"
/>

После этого я могу использовать Bootstrap в любом из моих шаблонов кода.

Кстати, этот код будет ссылаться на версию 4.3.1 - если вы хотите установить ссылку на другую версию, вы можете go на https://getbootstrap.com/ и получить ссылку «fre sh» - сайт очень помогает вам использовать ссылки CDN. .

Но я вижу, что вы хотите импортировать его в свой файл стилей. css, поэтому вам, вероятно, придется использовать относительный путь, возможно, что-то вроде: 

@import "../node_modules/bootstrap/dist/css/bootstrap.css";
...