4

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?

Vidya
  • 28,359
  • 6
  • 36
  • 63
  • 1
    Is there no CSS files in the build folder either (if you can run a build)? Might be that it bundles to a separate CSS file, but doesn't refer to it in the HTML. Ref: [Parcel - Assets](https://parceljs.org/assets.html) and [Parcel - CSS](https://parceljs.org/css.html) – Jezpoz Jun 22 '19 at 22:16
  • 1
    You're right. It is definitely something along those lines. Thanks. – Vidya Jun 22 '19 at 22:33

1 Answers1

0

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';
Mouad EL Fakir
  • 3,349
  • 2
  • 17
  • 35
  • I think it's unnecessary to create 2 files simply to be able to import one `css` file in *js* – vsync Apr 18 '21 at 20:42