Compiling 'react-scripts' to include a few images as data URIs within the CSS file

I have recently inherited a sizable React project, even though my experience with React is limited. Nonetheless, I am attempting to make improvements in areas where I feel confident.

An ongoing issue we are facing is the excessive size of our main CSS file, primarily due to the use of Data-URIs for images within background-image properties, despite originally being set as relative URLs in the SASS files.

Given that these images are reused throughout the application, our final CSS file ends up containing multiple instances of the same embedded images!

The culprit appears to be react-scripts build, which, according to the documentation found here:

To reduce server requests, images smaller than 10,000 bytes are returned as data URIs instead of paths.

This behavior is not desired. Is there a way to disable it? The project does not utilize Webpack or any other build tools/bundlers. My only option seems to be tweaking the scripts in package.json.

cssreactjsoptimizationnpmsass

Answer №1

It may not be possible to achieve this using a simple toggle feature, as create-react-app is intentionally limited in terms of customization.

If you want to make any changes to the configuration, there are a few options available:

Answer №2

Latest development: A new environment variable was introduced in early 2018 to enable customization of image size, as shown below:

export IMAGE_INLINE_SIZE_LIMIT=1000

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Effortless method for distributing NPM-loaded modules among various Browserify or Webpack bundles

Feeling frustrated trying to find a straightforward way to share code, required via NPM, across multiple Browserify or Webpack bundles. Is there a concept of a file "bridge" that can help? I'm not concerned about compile time (I know about watchify), ...

javascriptnode.jsnpmbrowserifywebpack

Blurring the background creates an "inset shadow" problem when transitioning

Problem: Strangely, when using Backdrop-filter: blur(Xpx); during a transition as shown below, unexpected "inset Shadows" mysteriously appear until the end of the transition. https://i.stack.imgur.com/uij7F.gif Illustration of the Issue Using jsfiddle Sp ...

htmlcssbluronblur

Creating a web application using ASP.NET in Visual Studio Code and running it locally with npm-lite server

I'm currently working on setting up a VB ASP.NET project on my Mac using VS Code, which is a Mac-compatible version of Visual Studio. It should work seamlessly, but the trouble is that there's no local server like IIS available. After stumbling ...

asp.net.netvb.netnpmvisual-studio-code

Position divs to be perfectly aligned and centered

I'm in the process of creating a webpage and facing challenges with aligning my divs properly, specifically the animated company logos. I want them to be positioned side by side rather than on top of each other, with space in between to fit the layou ...

javascriptjqueryhtmlcss

"What is the appropriate TypeScript type for this specific JSX code - React.ReactElement, React.ReactNode, and React.FunctionComponent all prove to be inadequate in this

Having an issue with assigning a type to my prop SubmissionComponent. This prop is expecting JSX, possibly a button or a more complex structure. For example: const SubmissionComponent = <p>hi</p>; which is then used like this: <Submitter ...

reactjstypescript

Access information from Cloudant using React

I'm a beginner in the world of node.js and I have a project where I need to visualize data stored in cloudant. After successfully fetching the data from cloudant using node.js, I am struggling to figure out how to send this data to react for visualiza ...

node.jsreactjsexpresscloudant

I'm curious about the method used to create this body fadeIn effect

Recently, I stumbled upon the website "". I must say, it is truly remarkable. I can't help but wonder how the content on this page is cleverly faded in and slides up. This specific page caught my attention: ...

javascriptjquerycssanimationcss-animations

Emojis representing flags displayed on screen

Is there an option to display a flag icon? For example, I am able to write Hello ...

htmlcss

Am I on the right track with my code?

Is the code I've written sufficient to position text above an image? It resembles the orange "Ask Question" button on StackOverflow, but without being a clickable button or link. The text is surrounded by an orange color and it works fine, but I' ...

cssimagehtmltext

How to automatically fill a row in ReactJS/Material-Table when a specific "lookup" or dropdown option is chosen?

Query: How do I utilize the Material-Tables "lookup" function to automatically populate a row based on the selected option? I have an array containing crucial data values, and my goal is to prefill the row with information from the array when a selection ...

reactjsmaterial-uimaterial-table

Dropdown in Bootstrap partially obscured by content on page

I have made some adjustments to my Bootstrap dropdown menu: The dropdown now appears when hovering, rather than clicking The li that triggers the dropdown is still clickable Although the dropdown is functioning correctly, there is an issue where it disa ...

htmlcsstwitter-bootstrap

Utilize the entire width of the page by evenly dividing it into different components and considering the occurrence of maximum

I have a code where I inserted a component (product), and I want it to take up the full width of the container. If there is only one component, it should use the full width, and if there are 2 or more, they should evenly distribute across the whole width. ...

htmlcssreactjsgridbootstrap-5

Save this text in HTML format to the clipboard without including any styling

When using this code to copy a htmlLink to the clipboard: htmlLink = "<a href='#'>link</a>"; var copyDiv = document.createElement('div'); copyDiv.contentEditable = true; document.body.appendChild(copyDiv); ...

javascripthtmljquerycssclipboard

Focus on a specific div element while bypassing its parent

Can I directly target the element with .div-3 class, even if its parent does not have an id or class? <div class="wrapper"> <div> <div> <div class="div-3"> </div> </div> </div> </div> I am aware ...

htmlcss

When a page is changed, the Vue.js Active Menu color remains enabled

Check out my website at . I want to customize the navigation bar so that only the active page's navbar li is colored in red. <div class="navigation-items"> <ul class="nav-list"> <li class="nav-item"><nuxt-link to="/en" ...

javascriptcsstwitter-bootstrapvue.jsnuxt.js

Keeping the Drawer open in Material-UI: What you need to know!

I am looking to create a collapsible sidebar feature in Material-UI where only the icons are displayed when collapsed. I have successfully implemented the Mini Variant Drawer for the basic sidebar functionality, but I'm facing an issue with maintainin ...

javascriptreactjsmaterial-ui

Tips on utilizing the NextJS Image Component to showcase images passed through props

I want to showcase images that are passed as props in my code import Image from "next/image"; import classes from "./book-item.module.css"; export default function FoodItems(props) { return ( <li className={classes.produ ...

reactjsnext.jsreact-propsnextjs-imagereact-image

Issue with babel-preset-env failing to detect JSX syntax

I'm currently facing an issue while trying to set up a webpack build for the first time. Despite thoroughly reviewing my babel config multiple times in relation to the documentation, I am unable to pinpoint the error causing a problem during the build ...

reactjswebpack

MUI TablePagination does not support the onRowsPerPageChange event

The MuiTable code provided below functions correctly for the most part. It displays the table content with the proper column headers, paginates every 5 rows, and enables navigation through pages using 'Previous' (<) and 'Next' (>) ...

reactjsreact-nativematerial-ui

Is there a way for me to collaborate on a footer control with a different website?

Is it possible to seamlessly incorporate a footer from one website into another? Ideally, I want the footer HTML (and styles) to be dynamically inserted into different web pages. The common workaround is using an iframe, but this causes navigation issues ...

javascripthtmlcss.netmodel-view-controller