twitter-bootstrap - Angular2 网页包 : how to import bootstrap css

Question

我正在使用 angular2-webpack-starter构建我的项目，我也想使用 bootstrap。

我安装 ng2-bootstrap作为npm install ng2-bootstrap --save .自 ng2-bootstrap只有一些指令，它需要“真实的”.css bootstrap 文件来设置它的样式(但它的作者似乎假设我们已经拥有它)，所以我将 bootstrap 安装为 npm install bootstrap --save .

现在，我的问题是如何导入“真正的” Bootstrap .css文件到我的项目，这样ng2-bootstrap可以使用它。

我尝试了几种方法:

1. 复制 bootstrap.min.css来自 node_modules/bootstrap/dist/css 的文件文件夹到我的 src/assets/css文件夹并添加 <link href="assets/css/bootstrap.min.css" rel="stylesheet">到我的index.html .这种方式可行，但我担心的是 bootstrap.min.css文件不会由 npm 管理任何更多。我以后必须手动更新它。

2. 另一个尝试要求我的 app.component.ts喜欢

   风格:[ require('./app.style.css'), 要求('../../node_modules/bootstrap/dist/css/bootstrap.min.css')],

但无法解决。

1. 最后一次尝试添加 import 'bootstrap';至 vendor.browser.ts就像import '@angular/core';在里面。但它也失败了。似乎 bootstrap不是像 @angular2/core 这样的包我可以轻松导入它。

所以，我的问题归结为如何导入/加载 bootstrap在 webpack 中，以便它可以被 ng2-bootstrap 使用和我项目中的其他组件，它也可以使用 npm 进行升级。

Answer 1

你需要使用css-loader通过使用下载 css-loader，我在我的 angular 2 中做了一些测试并且它工作你需要一些加载器

npm install css-loader style-loader url-loader file-loader  --save-dev

然后在你的 webpack.config 中你可以像这样使用 loader

 loaders: [
    {test: /\.css$/, loader:   ['style-loader', 'css-loader']},
    {test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
    {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
    {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
    {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" },
    {test: /\.html$/, loader: 'raw',exclude: /node_modules/},
    {test   : /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,loader : 'file-loader'},
]

您可以在要使用的地方加载您的 Bootstrap 文件你可以在你的类里面使用 bootstrap，比如

import "bootstrap/dist/css/bootstrap.css";
    @Component({
        selector: "sg-nav",
        template: `
                    <div class="container"></div>`,
    })
    export class NavComponent {
        public name: string = "MR.Js";
    }

here you can read how it works with css loader

working example with bootstrap