Question

直接来自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”＆gt;

然而，我一直得到404

获取http://localhost:4200/node_modules/bootstrap/dist/css/bootstrap.min.css

当我使用在线地址添加脚本时，它有效，但为什么angular无法找到我文件的路径？

Answer 1

如果您正在使用 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"
]

Answer 2

当index.html与node_modules位于同一目录时，它正在运作。

从angular-CLI put

添加引导程序

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

<{1>}中的

并运行angular-cli-build.js

Answer 3

如果在webpack转换后使用angular-cli，请添加

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

到styles中的angular-cli.json数组，如：

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

如果您还使用bootstrap javascript，请将这些文件添加到scripts数组。

Answer 4

您正在使用angular cli进行构建，因此您需要通过更新angularcli-build.js中的vendorNpmFiles将引导程序复制到供应商目录

bootstrap/**/*.*

现在您需要更新index.html的链接以从供应商

中选择css

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

Answer 5

您可以使用

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

或

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

Angular 2不导入Bootstrap css

5 个答案: