ISSUE
Imagine 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 specificity of the scss styles is the same as the ones in the min.css, the styles from min.css will override the ones from scss.
ADDITIONAL INFORMATION
To use scss, I'm utilizing the sass library (v1.38.2).
Below, you can see how the styles are processed (observe the behavior of the background properties between scss and min.css):
https://i.sstatic.net/HPKzV.png
In the image above, the min.css overrides the scss styles; However, when all scss files are compiled before runtime, the scss files will properly override the min.css ones (background-color will take precedence over background):
https://i.sstatic.net/mJ0jk.png
ROOT CAUSE
The issue may be due to the fact that the scss styles are processed first, causing them to be overridden by the styles in min.css, even though min.css is imported in index.js while the other scss files are imported at the component level.
RESOLUTION
To address this, I created an index.scss file (imported in
index.js</code) that contains all the app styles:</p>
<pre class="lang-js"><code>@import 'library/library.min';
@import 'styles/componentStyles1';
@import 'styles/componentStyles2';
@import 'styles/componentStyles3';
..
This approach ensures that the component styles will override the minified ones.
One caveat of this solution is that all styles are imported even if not all are immediately needed, which could potentially affect performance (please correct me if I'm mistaken).
CONCLUSION
Based on the above, any suggestions on how to improve this approach would be greatly appreciated. Thank you in advance for any insights or opinions!