bootstrap css is loaded after css imported in renderer code

I am using bootstrap react components with the bootstrap and reactstrap packages.

The packages are working, but my own css which is imported in my renderer typescript files are added **before** the bootstrap css in the webpack served styles.css file. This makes it so that I can't overwrite any of the bootstrap specified keywords without making them inline styles.

Is there a way to ensure the order that the css files are loaded with a custom webpack config? Or is there a way to update the generated html file so that I can ensure my css gets linked last?

Start by tracing how renderer TypeScript imports become the served styles.css file, then inspect the custom webpack configuration and generated HTML ordering described in the issue. Compare the available approaches for placing application CSS after Bootstrap CSS. Done means a documented or tested configuration produces the intended stylesheet order so application rules can override Bootstrap without inline styles.

Written by the indexing model from the issue text.