twitter-bootstrap Angular 2 不导入 Bootstrap css
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38189454/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 2 doesn't import Bootstrap css
提问by David Pascoal
Directly from https://angular.io/docs/ts/latest/guide/forms.html
直接来自https://angular.io/docs/ts/latest/guide/forms.html
Let's add the stylesheet.
Open a terminal window in the application root folder and enter the command:
npm install bootstrap --save
Open index.html and add the following link to the head.
link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
让我们添加样式表。
在应用程序根文件夹中打开一个终端窗口并输入命令：
npm install bootstrap --save
打开 index.html 并将以下链接添加到头部。
链接 rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
However, i keep getting 404
但是，我不断收到 404
GET http://localhost:4200/node_modules/bootstrap/dist/css/bootstrap.min.css
获取http://localhost:4200/node_modules/bootstrap/dist/css/bootstrap.min.css
It works when i add the script with the online address, but why does angular fails to find the path to my file?
当我添加带有在线地址的脚本时它可以工作，但是为什么 angular 无法找到我的文件的路径？
采纳答案by KB_
It is working when index.htmlis in the same directory as node_modules.
它index.html在与node_modules.
To add bootstrap from angular-CLI put
从 angular-CLI put 添加引导程序
'bootstrap/dist/**/*.+(js|css.map|css|eot|svg|ttf|woff|woff2)'
'bootstrap/dist/**/*.+(js|css.map|css|eot|svg|ttf|woff|woff2)'
in angular-cli-build.jsand run ng build
在angular-cli-build.js和运行ng build
回答by Frank Nguyen
If you're using angular-cli, you can go to root/styles.cssand add this line
如果你使用angular-cli，你可以去root/styles.css添加这一行
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
Or go to .angular-cli.jsonand modify styles
或者去.angular-cli.json修改styles
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
]
回答by MartinW
If you use angular-cli after the webpack transition, add
如果在 webpack 过渡后使用 angular-cli，添加
"../node_modules/bootstrap/dist/css/bootstrap.css"
to the stylesarray in angular-cli.jsonlike:
到styles数组中angular-cli.json：
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.css"
],
If you also use bootstrap javascript, add those files to the scriptsarray.
如果您还使用 bootstrap javascript，请将这些文件添加到scripts数组中。
回答by Arpit Agarwal
You are using angular cli for build hence you need to copy bootstrap to vendor directory by updating vendorNpmFilesin angularcli-build.js
您正在使用 angular cli 进行构建，因此您需要通过更新vendorNpmFilesangularcli-build.js将引导程序复制到供应商目录
bootstrap/**/*.*
Now you need to update link of index.html to pick css from vendor
现在您需要更新 index.html 的链接以从供应商处选择 css
< link rel="stylesheet" href="vendor/bootstrap/dist/css/bootstrap.min.css">
回答by Eslam Sameh Ahmed
You can use
您可以使用
@import "~bootstrap/dist/css/bootstrap.css";
or
或者
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
