Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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" }
    ]
  }
like image 648
Chris G. Avatar asked May 21 '15 10:05

Chris G.


People also ask

Can you use Webpack With React?

Webpack is not the only bundler you could use (there is Browserify), but it has quickly become the bundler of choice for many React developers, and it is featured in more than a few React best practices blog posts and tutorials.

Can React and Bootstrap be used together?

Bootstrap can be used directly on elements and components in your React app by applying the built-in classes as you would any other class.

Why use Webpack instead of create React app?

Configuring webpack provides complete control over the development environment, while initializing with Create React App prevents any custom configuration by default.


1 Answers

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"; 
like image 80
Alexandre Kirszenberg Avatar answered Sep 23 '22 04:09

Alexandre Kirszenberg