CODEWITHSUNDEEP
node.jstwitter-bootstrapnpmreactjs
Hedge
Hedge

Reputation: 16768

How to integrate bootstrap from NPM in React application?

I'm building a React application and would like to use Bootstrap in it. Therefore I'm using the package bootstrap-react. Bootstrap's CSS has to be integrated in the index.html. Currently I've got this:

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

I would like to use it directly from npm (https://www.npmjs.com/package/bootstrap) but don't know how to reference it. I could copy it via Gulp but is there a better way?

Upvotes: 2

Views: 2426

Answers (1)

Sean Adkinson
Sean Adkinson

Reputation: 8615

webpack

If you are using webpack, you can use the style-loader to require() the CSS file directly.

SASS

If you are using SASS, you can install bootstrap-sass and import the file directly from node_modules into your scss file

@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

I've had the most success with these two options. You can probably do the same thing with Less, although Bootstrap just announced they were switching to SASS, so you might want to switch anyway.

Upvotes: 4

Related Questions