Webpack CSS-build behaves differently in production than in development

Has anyone had an issue with CSS working differently in development than in a production build?

I refactored a large App to CRA, it had a single index.scss entry point which I just import in App.js.

// index.scss
@import "somefile.scss";
@import "someotherfile.scss";

// App.js
import "./index.scss";

Well, I’m noticing that when running npm start the app works perfectly in development. But when running npm run build and then deploy it to a staging environment, the app has slight visual differences, as if “somefile.scss” had higher specificity over “someotherfile.scss” (the opposite should be true). Does webpack do something different when building stylesheets for production?

I do not know how to report this as a bug, I can’t reproduce with a small app, so I’m wondering if anyone else is having this issue. I’ve seen multiple similar issues in other repos but not CRA.

Edit

I’m using react-scripts@^2.1.3

[bugzpodder]

For example: https://github.com/facebook/create-react-app/pull/4706 https://github.com/cssnano/cssnano/issues/661

[pgarciacamou]

I found the difference :: not a webpack/CRA bug (per se).

My issue is actually outside of index.scss and happens because our app is lazy-loading some other styles and manually moving them into a child iframe.

The difference between dev and production build is that webpack seems to bundle the lazily-loaded-stylesheets as chunks and loads them using <link> elements, while in development, it uses <style> elements and injects as text.

Like so:

<!-- production -->
<link href="1.chunk.123123.css" rel="stylesheet">

<!-- development -->
<style>
  .code {}
</style>

Long story short: the app was not finding the style tag to be moved and is conflicting with the top frame styles.