Tampa Tampa - 1 month ago 14
AngularJS Question

How to use CSS when installed from npm in Angular2

I am trying to install the below:

npm install bootstrap-material-design


I then added the below to my package.json

"dependencies": {
...
"bootstrap-material-design": "0.5.10"
}


So in angular2 using webpack, how do I import? The docs for the package say the below and the package was installed in
node_modules/bootstrap-material-design/
:

<!-- Bootstrap Material Design -->
<link rel="stylesheet" type="text/css" href="dist/css/bootstrap-material-design.css">
<link rel="stylesheet" type="text/css" href="dist/css/ripples.min.css">


So in the head do I include via the below:

<!-- Bootstrap Material Design -->
<link rel="stylesheet" type="text/css" href="node_modules/bootstrap-material-design/dist/css/bootstrap-material-design.css">
<link rel="stylesheet" type="text/css" href="node_modules/bootstrap-material-design/dist/css/ripples.min.css">


Or will angular2 already include?

Answer

It's better you include in your main module file like in app.ts file:

// Just make sure you use the relative path here
import '../../node_modules/bootstrap-material-design/dist/css/bootstrap-material-design.css'
import '../../node_modules/bootstrap-material-design/dist/css/ripples.min.css'

// your component (example code below)

@Component({
    selector: 'app',
    templateUrl: 'app.template.html'
})

And that's it. Webpack will take care of the reset.

Edit:

If you have created the app using angular-cli/ng-cli then you can also include these stylesheets to angular-cli.json

Comments