Angular2 webpack: how to import bootstrap css

Question

I am using angular2-webpack-starter to create my project and I also want to use bootstrap.

I install ng2-bootstrap as npm install ng2-bootstrap --save . Since ng2-bootstrap has only a few directives and it requires a “real” .css bootstrap file to create it (but its author seems to have suggested it), so I install bootstrap as npm install bootstrap --save .

Now, my question is how to import the “real” bootstrap .css file into 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 to the src/assets/css folder and add <link href="assets/css/bootstrap.min.css" rel="stylesheet"> to my index.html . This method works, but I am worried that the bootstrap.min.css file will no longer be managed by npm . I have to manually update it in the future.

• Another attempt requires from my app.component.ts type

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

but it cannot be resolved.

3. The last attempt adds import 'bootstrap'; in vendor.browser.ts exactly the same as import '@angular/core'; . But that did not work either. It seems that bootstrap not a package like @angular2/core , which I can easily import.

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

Answer 1

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

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

then in your webpack.config you can use a 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 the boot file into which you can and you can use bootstrap in your class, for example

 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 download

Answer 2

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

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

instead.

Answer 3

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 it refers to bootstrap.js);

the second can import css.

and in your webpack.config.js you can use the bootloader

Answer 4

You can configure it through Webpack, but this requires installing and adding downloaders to your webpack.config.js (css downloaders, style downloaders, URL downloaders, file downloaders) and then import bootstrap.min. The css file and boot files in your vendor.ts.

I think this is pretty verbose. Instead of the above, you can simply install (for example, using npm) and add one line under your scripts (jspppppackup mini files) to your index.html

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 

Answer 5

Maybe the best way, but I'm using bower to handle CSS related libs (like bootstrap, font-awesome) in my ng2 project.

Install your .bowerrc to save the files to: src/assets/lib (for example) as follows:

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

Then establish a conversation with npm.

npm install bower --save-dev

And then you can install bootstrap with:

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

The best part about this solution is that bower handles all the dependencies for you (for example, it will automatically add jquery to your lib directory)

Then you can manually add your links to 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 installation / deployment I run bower install .