Search code examples
reactjsnpmbootstrap-4sassreact-bootstrap

How to Change Parcel Bundler's Compiled CSS Links' Order in the Compiled HTML

I'm trying to customize Bootstrap's SASS variables so I need to link Bootstrap's CDN in my uncompiled HTML but every time I use Parcel to bundle everything, the resulting compiled HTML has the link for the CDN come after the auto-generated CSS link for my customizations (the compiled CSS of my SASS that was imported on my index.js) which in turn resets everything to their default styling.

enter image description here

I'm new to Parcel and I was wondering if there's a way for me to change the order of the generated CSS link to come after the CDN link in the compiled HTML? So that I won't need to rearrange them every time I compile.

Solution

  • Having the same issue, can't find any related docs. As a temporary(?) solution I moved the css import away from my App.jsx file to another <link> tag in the HTML, after the bootstrap link (same goes for css-reset).

    Before:

    // App.jsx
import './main.css';

    After:

    // index.html
<link rel="stylesheet" href="https://cdn.com/path/to/bootstrap" />
<link rel="stylesheet" href="main.css" />

    According to Parcel's docs this should also work with sass, less and stylus
    (e.g. <link rel="stylesheet" href="main.less" />.

    Parcel/less docs