Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

141
Views
Migrating to react-scripts@4 having problem with assets in css

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?

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!