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:

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

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.

Regarding number 2. Are you sure you can't import css directly from node_modules? I have no problem doing this. — Post Impatica
– Post Impatica, Commented Aug 3, 2016 at 13:39
@Helzgate I can't. How do you import it, is it like require('../../node_modules/bootstrap/dist/css/bootstrap.min.css')? — Bing Lu
– Bing Lu, Commented Aug 3, 2016 at 22:01
I don't know, it just works, i've been using it this way in many places for some time in my app (and yes i'm talking about from node_modules). Are you absolutely sure you have enough elipses? I would try adding some more ../ and trying that, or subtracting some. Pay attention to the error too, maybe it is loading the css but you are running into some other error. — Post Impatica
– Post Impatica, Commented Aug 4, 2016 at 16:07
Here's what I would do --> git clone --depth 1 github.com/AngularClass/angular2-webpack-starter.git <-- then I would get this new cloned demo working, then I would test out your css within this demo app and if you get it working (which I'm sure you will), hopefully you'll find the missing problem by comparing the webpack.config files to your project config files, or something similar. — Post Impatica
– Post Impatica, Commented Aug 4, 2016 at 16:16

Jorawar Singh · Accepted Answer · 2016-07-23 17:20:46Z

5

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

edited Jul 23, 2016 at 17:20

answered Jul 23, 2016 at 4:01

Jorawar Singh

7,6414 gold badges29 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Bhushan Gadekar Over a year ago

can you tell how to use this css loader with angular-cli.i a not able to refer to my bootstrap in node_modules

Bing Lu Over a year ago

This solution is similar to my No. 1 solution. The .css is loaded but it's loaded from src folder rather than from node_modules/bootstrap. So, if I update version in package.json and npm install, the css file won't get updated.

Jorawar Singh Over a year ago

i have implemented bootstrap in my angular2 project and edited my answer to show you how it work. try it!

Jack Guy · Accepted Answer · 2016-07-23 02:15:51Z

0

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

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

instead.

answered Jul 23, 2016 at 2:15

Jack Guy

8,5538 gold badges61 silver badges88 bronze badges

2 Comments

Bing Lu Over a year ago

It doesn't work. I get ERROR in ./~/bootstrap/dist/css/bootstrap.min.css. The css file is in node_modules/bootstrap/dist/css/bootstrap.min.css but it seems that we can't import a .css file in a .ts file. It can't be resolved.

kirqe Over a year ago

but how to add jquery? When I import files to vendor I get Uncaught Error: Bootstrap's JavaScript requires jQuery but Css works just fine

Qing · Accepted Answer · 2016-11-23 08:22:20Z

0

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

answered Nov 23, 2016 at 8:22

Qing

11 bronze badge

Comments

Belfield · Accepted Answer · 2017-01-11 23:25:46Z

0

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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

answered Jan 11, 2017 at 23:25

Belfield

1,4892 gold badges14 silver badges18 bronze badges

Comments

andzep · Accepted Answer · 2017-03-07 21:52:14Z

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.

Collectives™ on Stack Overflow

Angular2 webpack: how to import bootstrap css

5 Answers 5

3 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related