Не могу добавить Bootstrap 4 в Angular 6

Question

У меня проблема при попытке добавить последнюю версию начальной загрузки с

npm install bootstrap

После этого я получил сообщение об ошибке при попытке запустить его.

ng serve --open

Добавляю Bootstrap в angular.json

как это

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

И сообщение об ошибке

    ERROR in multi ../node_modules/bootstrap/dist/css/bootstrap.min.css ./src/styles.css
Module not found: Error: Can't resolve '...\node_modules\bootstrap\dist\css\bootstrap.min.css' in '...'

Почему я получил сообщение об ошибке?

Answer 1

Если у проекта есть тестовый прогон, такой как Karma, файл Angular.json имеет два свойства стилей:

1- проекты -> имя_проекта -> архитектор -> сборка -> параметры

2- projects -> projectName -> architect -> test -> options

Возможно, вы просто измените стили в разделе теста, а в разделе сборки будет старыйстили.

Answer 2

В новой версии angular используйте node_modules / bootstrap / dist / css / bootstrap.min.css вместо .. / node_modules / bootstrap / dist / css / bootstrap.min. CSS

Итак, атрибут стиля файла angular.json будет выглядеть как

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

ПРИМЕЧАНИЕ: , если ng serve уже запущен, вам может потребоваться остановить и запустить его снова после внесения вышеуказанных изменений. Удачного кодирования:)

Answer 3

В Angular 6 вы можете добавить загрузчик к двум файлам:

1. Внутри angular.json :

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

2. Внутри angular.json :

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

3. Внутри styles.css :

   /* You can add global styles to this file, and also import other style files */
   @import "~bootstrap/dist/css/bootstrap.css";
   

Примечание : если вы используете первый или второй способ, необходимо отменить запущенное приложение, то есть, если ng serve активен, вы должны выйти из приложения с Ctrl + C но в-третьих, отменить заявку не нужно.

Answer 4

Удалить "../node_modules/bootstrap/dist/css/bootstrap.min.css", в Angular.json.

Попробуйте добавить @import "~bootstrap/dist/css/bootstrap.css"; в ваш файл style.css.

Ссылка: Стилизация угловых приложений CLI v6 с помощью Bootstrap