react-bootstrap using webpack

Question

I am trying to use react-bootstrap with web pack. I am able to get a bootstrap <Button> on a page, but there is no styles attached? I have installed:

 "devDependencies": {
    "babel-core": "^5.1.11",
    "babel-loader": "^5.0.0",
    "css-loader": "^0.12.1",
    "react-hot-loader": "^1.2.2",
    "react-router": "^0.13.3",
    "webpack": "^1.7.2",
    "webpack-dev-server": "^1.7.0"
  },
  "dependencies": {
    "bootstrap": "^3.3.4",
    "react": "^0.13.0",
    "react-bootstrap": "^0.22.6",
    "whatwg-fetch": "^0.8.1"
  }
}

Loaders in webpack.config.js

  module: {
    loaders: [
      { test: /\.jsx?$/, loaders: ['react-hot', 'babel'], include: path.join(__dirname, 'app') },
      { test: /\.css$/, loader: "style-loader!css-loader" },
      { test: /\.png$/, loader: "url-loader?limit=100000" },
      { test: /\.jpg$/, loader: "file-loader" }
    ]
  }

Alexandre Kirszenberg · Accepted Answer · 2020-09-03 15:03:52Z

40

react-bootstrap does not include the bootstrap styles.

As they put it on their Getting Started page:

Because React-Bootstrap doesn't depend on a very precise version of Bootstrap, we don't ship with any included CSS. However, some stylesheet is required to use these components.

You should import the styles from bootstrap/dist/css/bootstrap.css. Since you already have a loader setup for css files and have a dependency on bootstrap, it's as simple as

require('bootstrap/dist/css/bootstrap.css');

or

import "bootstrap/dist/css/bootstrap.css";

edited Sep 3, 2020 at 15:03

answered May 21, 2015 at 11:47

Alexandre Kirszenberg

36.4k10 gold badges93 silver badges72 bronze badges

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

8 Comments

Matt Smith Over a year ago

You can also use the webpack less-loader and pick and choose which bootstrap components you want to include. This will allow you to have webpack give you a much smaller minified bundle when you are done.

CallMeNorm Over a year ago

This worked fairly well, but for me it we require('bootstrap/dist/css/bootstrap.css');

Piotr Sobczyk Over a year ago

Probably you will also have to configure loaders for fonts that way. I additionally had to copy the line for woff and change it to woff2 to support both of those types.

Tyler Collier Over a year ago

What am I missing? Aren't you folks getting errors about eot, woff2, ttf, and svg files? I had to use this advice for that.

realisation Over a year ago

Hmmm, where do we require that to? In the webpack config? Index.js, or styles.css?

|

Collectives™ on Stack Overflow

react-bootstrap using webpack

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related