0

I'm using npm, Parcel Bundler, Bootstrap 5, React, and React-Bootstrap.

Everything compiles well on my dist folder even the bootstrap scss variable that I customized but when I start serving the app it doesn't include the styling at all.

I followed everything on the getting started page of React-Bootstrap.

Where I created a custom.scss file where the only difference is I only imported the ones I needed and customized the $navbar-brand-font-size variable:

$navbar-brand-font-size: 4rem;

@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";
@import "../../node_modules/bootstrap/scss/mixins";
@import "../../node_modules/bootstrap/scss/reboot";
@import "../../node_modules/bootstrap/scss/grid";
@import "../../node_modules/bootstrap/scss/navbar";

Then as mentioned in the getting started page I imported it on my App.scss file:

@import "../scss/custom";

.App {
    text-align: center;
}

.App-header {
    background-color: #282c34;
    min-height: calc(100vh - 77.03px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: calc(10px + 2vmin);
    color: white;
}

Everything compiles well on my dist folder: enter image description here

And I could even see the compiled change on the CSS: enter image description here

But when I start the app the change doesn't apply: enter image description here

Also, I can't seem to use Bootstrap's utility classes that's why my Navbar Brand isn't centered vertically where

<Navbar.Brand className="align-middle" href="#home"> ... </Navbar.Brand>

doesn't seem to work.

Improve this question
5
  • Try importing your css file after the bootstrap cdn, and then inspect to see if it's being detected in the styles. If it shows, but isn't applied then you might need to use !important. If it doesn't show at all, then the issue could be something else.
    – Siddharth Bhansali
    Commented Jul 21, 2021 at 19:08
  • @SiddharthBhansali you're right, it turns out my CSS links are not in the right order. But how can I change their order in Parcel so that I don't have to manually rearrange them every time I compile?
    – ColstonBod-oy
    Commented Jul 22, 2021 at 6:02
  • Given both of your links are added in the index.html file, you could just change the order there itself and it should reflect all over.
    – Siddharth Bhansali
    Commented Jul 22, 2021 at 6:19
  • @SiddharthBhansali the index.css is auto generated by parcel because I have other separate CSS files and import them on my separate JS files because I'm using React and all of them meet at my index.js. So the CDN is the only one that I manually added at my uncompiled HTML.
    – ColstonBod-oy
    Commented Jul 22, 2021 at 6:41
  • Yeah that I understood, but you do still have an index.html in your public folder right. Could you show the code of that file?
    – Siddharth Bhansali
    Commented Jul 22, 2021 at 9:12
Related questions
2
Cannot create custom style with React and Bootstrap
1
bootstrap scss with reactjs not adding bootstrap classes
8
How to customize Bootstrap variables in a React app?
Load 7 more related questions Show fewer related questions

0

Reset to default

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.