There is no style applied when using Reactstrap with Parcel

Question

I'm using parcel to bundle my code and reactstrap to style my react app. I have an example:

import React from "react";
import { Button } from "reactstrap";

const Layout = () => {
  return (
    <>
      <header></header>
      <Button color="danger">Danger!</Button>
    </>
  );
};

export default Layout;

This supposes to create a nice red button. But when I run the app with parcel (in dev mode), it gives me a plain button, however the button is applied a classname ( btn btn-danger ) on it. Here is the result:

What's wrong with parcel and reactstrap ? How can I get rid of this problem?

Answer 1

You have to install bootstrap package and then add bootstrap.min.css inside your index.js file:

Install bootstrap package:

npm install --save bootstrap

Add bootstrap.min.css to your index.js file:

import 'bootstrap/dist/css/bootstrap.min.css';