Fix css relative asset urls

[chadfawcett]

Issue: resolves #4645

What I did

• Added a react-scripts v2 cli test fixture
• Removed the incorrect file paths for css minification in cra prod webpack config.

How to test

I tested both by adding a relative asset to the cra-kitchen-sink styles and built storybook for prod (yarn build-storybook).

I also cloned @Vinnl's repo and testing the stories there.

[chadfawcett]

These settings were copied over from cra's webpack config. Since storybook does not have a dynamic publicPath like cra, these are not needed. As mentioned in the storybook config, relative urls always work.

https://github.com/storybooks/storybook/blob/48b2b51332156d690f49b334ce998ad5c50f0b12/lib/core/src/server/config/webpack.config.prod.js#L28-L33

[Vinnl]

I just tested this by manually applying the same fix and I confirm that CSS-imported images are shown now. Thanks!

[shilman]

Don't understand the change but seems to fix the problem!

[chadfawcett]

@shilman In CRA, they have a dynamic public path and a check to see if relative paths should be used.

My original implementation copied over the CSS minification paths that didn't match up with the mini css loader. So this just gets those back in sync.

Edit: Can you also add the app/react label to this PR?

[igor-dv]

Can you please update the snapshots?

[chadfawcett]

@igor-dv Which test checks the snapshots? Everything either passes locally or fails on the Vue bugs in Master.

[codecov]

Codecov Report

Merging #4695 into master will not change coverage.
The diff coverage is 0%.

@@           Coverage Diff           @@
##           master    #4695   +/-   ##
=======================================
  Coverage   35.59%   35.59%           
=======================================
  Files         557      557           
  Lines        6732     6732           
  Branches      884      884           
=======================================
  Hits         2396     2396           
  Misses       3876     3876           
  Partials      460      460

Impacted Files	Coverage Δ
app/react/src/server/cra_config.js	0% <0%> (ø)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 870cee3...11a28a0. Read the comment docs.