How to use CSS when installed from npm in Angular2

Question

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?

Shashank Agrawal · Accepted Answer · 2016-10-09 05:15:23Z

2

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

edited Oct 9, 2016 at 5:15

answered Oct 9, 2016 at 5:05

Shashank Agrawal

25.9k11 gold badges98 silver badges126 bronze badges

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

2 Comments

Tampa Over a year ago

I assume that same logic goes with jquery too?

Shashank Agrawal Over a year ago

yup, correct. You can do the same with jQuery as well.

Collectives™ on Stack Overflow

How to use CSS when installed from npm in Angular2

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related