Angular2 webpack: how to import bootstrap css

Question

I'm using angular2-webpack-starter to build my project and I want to use bootstrap as well.

I install ng2-bootstrap as npm install ng2-bootstrap --save. Since the ng2-bootstrap only has some directives and it requires the "real" .css file of bootstrap to style it (but its author seems to assume we have had it), so I install bootstrap as npm install bootstrap --save.

Now, my question is how to import the "real" bootstrap .css file to my project, so that ng2-bootstrap can use it.

I tried several ways:

1. copy the bootstrap.min.css file from node_modules/bootstrap/dist/css folder to my src/assets/css folder and add <link href="assets/css/bootstrap.min.css" rel="stylesheet"> to my index.html. This way works but my concern is that the bootstrap.min.css file won't be managed by npm any more. I have to manually update it in future.

2. Another attempt is requiring it from my app.component.ts like

   styles: [ require('./app.style.css'), require('../../node_modules/bootstrap/dist/css/bootstrap.min.css') ],

but it can't be resolved.

3. last try is adding import 'bootstrap'; to vendor.browser.ts just like import '@angular/core'; in it. But it failed either. It seems that the bootstrap is not a package like @angular2/core that I can easily import it.

So, my question comes down to how to import/load bootstrap in webpack, so that it can be used by ng2-bootstrap and other components in my project and it can also be upgraded by using npm.

Answer 1

you need to use css-loader download css-loader by using, i did some test in my angular 2 and it work you need some loaders

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

then in your webpack.config you can use loader like this

 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'},
]

you can load your bootstrap file where you are going to use it with and you can use bootstrap in your class like

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