Tampa Tampa - 1 year ago 106
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

<!-- 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 Source

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)

    selector: 'app',
    templateUrl: 'app.template.html'

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


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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download