Webpack CSS-build behaves differently in production than in development

[pgarciacamou]

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

[pgarciacamou]

I wonder, maybe I could debug this if there is a way to make CRA get a dev-build and a prod-build without all the minifying from webpack on production builds, this way I could compare the outputs and go from there. Any ideas?

[bugzpodder]

I've ran into this issue before. You can test this by go into node_modules/react_scrripts/config/webpack.config.js and mess around with the configuration to see what works for you.

[pgarciacamou]

@bugzpodder

I've ran into this issue before.

Do you mean the CSS issue? If so, do you remember more details about it (e.g. did you work around it or found what was causing the issue)?

You can test this by go into node_modules/react_scrripts/config/webpack.config.js and mess around with the configuration to see what works for you.

I'll try that 🤞

[bugzpodder]

For example:
#4706
cssnano/cssnano#661

[pgarciacamou]

Thanks @bugzpodder! I'm debugging and will report my findings in 10 minutes.

[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.