Angular 2 不导入 Bootstrap css

Posted 2023-03-03

【中文标题】Angular 2 不导入 Bootstrap css

【英文标题】：Angular 2 doesn't import Bootstrap css

【发布时间】：2016-11-06 11:10:23

【问题描述】：

直接来自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

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

当我添加带有在线地址的脚本时它可以工作，但是为什么 angular 找不到我的文件的路径？

【问题讨论】：

你能检查css是否存在于文件系统的那个位置。您是否使用 Angular cli 构建？如果是，那么您需要将其复制到供应商并调整路径

是的，文件在那里。添加到供应商是指 vendorNpmFiles 吗？我在 'bootstrap/**/*' 中添加了这一行，但它仍然不起作用。

是的，现在检查 dist/vendor 中是否有文件。如果是，则将链接更改为链接 rel="stylesheet" href="vendor/bootstrap/dist/css/bootstrap.min.css">

【参考方案1】：

你可以使用

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

或

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

【参考方案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】：

如果你在 webpack 过渡后使用 angular-cli，添加

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

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

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

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

【讨论】：

建议在应用程序[0].styles中使用Bootstrap CSS；即"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.css", "styles.css" ]，参考npmjs.com/package/angular-cli

@MartinW 将其添加到 angular-cli.json 或仅将其导入 sass/scss 文件（如果使用的话）有什么区别？

奇怪，为什么没有人支持这个？这是最简单的方法。但我确实必须重做“ng serve”才能获取更改。

【参考方案4】：

当index.html 与node_modules 位于同一目录时，它可以工作。

从 angular-CLI put 添加引导程序

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

在angular-cli-build.js 中运行ng build

【参考方案5】：

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

bootstrap/**/*.*

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

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