Angular2 webpack: how to import bootstrap css

拟墨画扇 提交于 2019-12-05 00:10:04


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('./'), require('../../node_modules/bootstrap/dist/css/bootstrap.min.css') ],

but it can't be resolved.

  1. 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.


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";
        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


import 'bootstrap'; would refer to Bootstrap's JS entry point, not its CSS. Try number 3 with

import 'bootstrap/assets/css/bootstrap.min.css';



maybe you can try like this

import 'bootstrap';
import '!style-loader!css-loader!bootstrap/assets/css/bootstrap.min.css';

the first 'import' will import the 'bootstrap' module(maybe refer to bootstrap.js);

the second one may import the css.

and in your webpack.config.js you can use loader


You could set it up via Webpack, but this requires installing and adding loaders to your webpack.config.js (css-loaders, style-loaders, url-loaders, file-loaders), then importing the bootstrap.min.css file and bootstrap files in your vendor.ts.

I think this is pretty verbose. Rather than the above, you could just simply install (eg using npm) and add the one line below your scripts (the minified webpack js files) to your index.html

<link href="" rel="stylesheet">


There might be a better way, but I'm using bower to handle css-related libs (e.g. bootstrap, font-awesome) in my ng2 project.

Set your .bowerrc to save files into: src/assets/lib (for example) like this:

    "directory": "src/assets/lib",

Then install bower with npm.

npm install bower --save-dev

And then you can install bootstrap with:

bower install bootstrap --save to add (and if you want to pin the version number) to your bower.json file.

The nice thing about this solution is that bower handles all dependencies for you (for example, it would automatically add jquery to your lib directory)

Then you can manually add your links in your index.html, as you already did: <link rel="stylesheet" href="./assets/lib/bootstrap/dist/css/bootstrap.min.css"/>

I added the src/assets/lib folder to my .gitignore ... and for installing/deploying, I run bower install.