Heroku not minimizing CSS files with CRA/node.js

Question

If I build my files locally, I see my css folder and its contents are minimized under /build/static with a js folder and media folder next to it.

When push the changes to Heroku and bring up my app, the css folder is not there. Under my meta tags in the <head> I see a bunch of <style></style>'s. But in my <body> there's scripts that are minified.

When I go to the sources tab in dev tools, under my app, under static, all I see is a js folder and a media folder, unlike when I build locally.

My css files are with my components, under src folder if that matters.

Why is this happening and how do I fix it?

Could be [source maps](https://developer.chrome.com/docs/devtools/javascript/source-maps/) which CRA generates by default for production. According to [this answer](https://stackoverflow.com/q/55904292/996081), you can set the environment variable `GENERATE_SOURCEMAP=false` to disable the source map generation for production. Heroku calls environment variables "Config vars", try setting it and rebuilding the app. — cbr, Jun 10 '21 at 19:59
Nope, didn't change a thing unfortunately. Thank you for the answer though! Did learn something new :) — mike, Jun 10 '21 at 20:05

score 0 · Answer 1 · answered Jun 10 '21 at 21:13

0

You need to setup GENERATE_SOURCEMAP=false variable

answered Jun 10 '21 at 21:13

I have that both in my scripts with "build": "GENERATE_SOURCEMAP=false react-scripts build", and under my heroku config. Not it – mike Jun 10 '21 at 21:30
Also tried in just in my scripts and not in config. Ill try in config and not scripts – mike Jun 10 '21 at 21:32
Nope, nothing on all 3 – mike Jun 10 '21 at 21:36

Heroku not minimizing CSS files with CRA/node.js

1 Answers1