Importing CSS from node_modules with Parcel

Question

I am currently migrating as React project built with Webpack into Parcel as an experiment to see what the hype is all about. The project uses Reactstrap, which has Bootstrap as a dependency.

I have a main.tsx file that is the "shell" for most of the other pages in the app, and it imports Bootstrap CSS from node_modules like so:

import * as React from "react";
import 'bootstrap/dist/css/bootstrap.min.css'; // <-- There it is!
...

This works fine with Webpack, and when I build a file that imports main.tsx (and presumably the Boostrap CSS that comes with it) with Parcel, there are no errors. However, there is no Bootstrap CSS on the page, so it looks wack.

Although Parcel bills itself as "zero configuration," is there some configuration I need to add for Parcel to process and import that CSS?

Answer 1

First you need to have the following structure in your React/Parcel project :

root
  |- node_modules
  |- src
  |   |- styles.scss
  |   |_ main.tsx
  |
  |- .sassrc
  |_ package.json

Define includePaths in the .sassrc :

// file : .sassrc
{
  "includePaths": [
    "node_modules/",
    "src/"
  ]
}

Import bootstrap in styles.scss

// file : styles.scss
@import '../node_modules/bootstrap/scss/bootstrap';

Then import your styles.scss in main.tsx

// file : main.tsx
import * as React from 'react';
import '~/styles.scss';