Search code examples
webpackreact-bootstrap

react-bootstrap using webpack

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" }
    ]
  }
Solution

  • 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";