Evaluate component-scoped scss styles after global min.css in React

PROBLEM

Let's say we have a min.css file that needs to be imported globally:

index.js

import ReactDOM from "react-dom";

import App from "src/App";

import "library/library.min.css";

ReactDOM.render(<App />, document.getElementById("root"));

And some scss styles applied on a component level:

App.js

import "./styles.scss"

const App = () => (
    <div>
        {/* .. */}
    </div>
);

If the scss styles have the same level of specificity as the ones in the min.css, then the ones in the min.css will be overriding the ones coming from scss.

FURTHER INFO

For adopting scss, I'm using the sass library (v1.38.2).

For comparison, you can see below how the styles are evaluated (notice the behaviour of the background properties between scss and min.css):

Above you can see the min.css overrides the scss styles; Below, I compiled all scss before runtime and in this case, the scss files will be overriding the min.css ones properly (background-color will override background):

CAUSE

I'd think the problem is caused because the scss styles are being processed first, so they get overridden by the styles on the min.css, even though the min.css is imported on index.js while the other scss are imported down the tree on the component level.

SOLUTION

Given such supposition, I created an index.scss (imported on index.js) which contains all the app styles:

@import 'library/library.min';

@import 'styles/componentStyles1';
@import 'styles/componentStyles2';
@import 'styles/componentStyles3';
..

And that will work, as the component styles will be overriding the minified ones.

A problem I would think of this though, is that we would be importing all styles even if we won't require them all straight up, so I'd suppose that could degrade performances (please correct me if I'm wrong).

CONCLUSIONS

Given the above, is there any suggestion on how this could be approached in a better way? Any opinion in merit is highly welcomed, thank you in advance!

from Evaluate component-scoped scss styles after global min.css in React