I am migrating from react-scripts@3.4.3 to react-scripts@4.0.3 (main util of Create react app) and i have struggle with referencing images in the CSS files.
Previously I had in my CSS referenced URLs like:
.social.linkedin {
background-color: #006699;
background-image: url('/assets/socials/linkedin@2x.png');
}
.social.telegram {
background-color: #28a0d3;
background-image: url('/assets/socials/telegram@2x.png');
}
.social.github {
background-color: #1b1f23;
background-image: url('/assets/socials/github@2x.png');
}
React scripts just preserved these URLs during the transpilation and in the final bundle URLs were exactly the same as in source files. I have configured a server such as /assets path was served by CDN. Everything was working.
But in version 4.0.3 react-scripts are trying to be "smarter" and import images into the production build as data URI. They deal with them as other code imports and restrict their existence only to src folder or libraries.
Creating an optimized production build...
Failed to compile.
./src/35-styles/index.css
Error: Can't resolve '/assets/socials/github@2x.png' in 'C:\Users\me\work\collboard\collboard-merging\src\35-styles'
at runMicrotasks (<anonymous>)
Can I somehow turn off this feature without referencing assets externally as absolute URLs or putting them into the src folder and having them as inefficient data URIs in the CSS bundle?