Angular 2 не импортирует Bootstrap css

Непосредственно из https://angular.io/docs/ts/latest/guide/forms.html

Добавьте таблицу стилей.

Откройте окно терминала в корневой папке приложения и введите команду:

npm install bootstrap --save

Откройте index.html и добавьте следующую ссылку в голову.

link rel= "stylesheet" href= "node_modules/bootstrap/dist/css/bootstrap.min.css" >

Однако я продолжаю получать 404

GET http://localhost:4200/node_modules/bootstrap/dist/css/bootstrap.min.css

Он работает, когда я добавляю script с онлайновым адресом, но почему angular не удается найти путь к моему файлу?

Ответы

Ответ 1

Он работает, когда index.html находится в том же каталоге, что и node_modules.

Чтобы добавить загрузку из angular -CLI put

'bootstrap/dist/**/*.+(js|css.map|css|eot|svg|ttf|woff|woff2)'

в angular-cli-build.js и запустите ng build

Ответ 2

Если вы используете angular -cli, вы можете перейти на root/styles.css и добавить эту строку

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

Или перейдите к .angular-cli.json и измените styles

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

Ответ 3

Если вы используете angular -cli после перехода в webpack, добавьте

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

в массив styles в angular-cli.json, например:

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

Если вы также используете javascript bootstrap, добавьте эти файлы в массив scripts.

Ответ 4

Вы используете angular cli для сборки, поэтому вам нужно скопировать bootstrap в каталог поставщика, обновив vendorNpmFiles в файле angularcli-build.js

bootstrap/**/*.*

Теперь вам нужно обновить ссылку index.html, чтобы выбрать css из поставщика

< link rel="stylesheet" href="vendor/bootstrap/dist/css/bootstrap.min.css">