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

Issue with React: Children's state is altering the state of the parent component

Question : Why is it possible for a child component to change the state of its parent when each component has its own state? Below is the complete code for my app: import React, { Component } from 'react'; import { render } from 'react-do ...

javascriptreactjsecmascript-6material-ui

BrowseSEO does not have the ability to read META tags within a Next.js React App

I have a website built with the Next.js framework. To optimize SEO, I have added unique <Meta/> tags in the <Head/> component from Next/Head on each page (index.tsx, titles/[title].tsx). However, when testing with a crawling site like BrowseSEO ...

reactjsseonext.js

Ensure the left column extends all the way down

I've been struggling with this issue for almost three days now. After reading numerous articles on creating a three-column layout and experimenting with absolute and relative positioning, I'm still not able to achieve the desired result. What I& ...

css

The error message "The type 'MouseEvent' is non-generic in TypeScript" popped up on the screen

Having created a custom button component, I encountered an issue when trying to handle the onClick event from outside the component. I specified the parameter type for the onClickCallback as MouseEvent<HTMLButtonElement, MouseEvent>, which is typical ...

reactjstypescriptnext.js

Experiencing issues with npm installation and Git usage following the upgrade to MacOS Mojave 10.14.4 (18E226)?

Initially, the system works fine after a restart. However, I repeatedly encounter the following error: curl: (35) LibreSSL SSL_connect: SSL_ERROR_SYSCALL in connection to ssl.icu-project.org:443 and request failed ... read ECONNRESET This issue arises c ...

gitmacoscurlnpmhomebrew

Tips for consolidating multiple projects under one domain without incurring any additional costs

Good morning! In my quest to host multiple projects on a single domain, specifically xyz.com, I am faced with a dilemma. I have an outdated personal developer portfolio created with React, and a newer software built with Vue.js that I would like to use fo ...

reactjsvue.jsdeploymentdnshosting

Retrieve jQuery CSS styles from a JSON database

I've been attempting to pass CSS attributes into a jQuery method using data stored in a JSON database. However, it doesn't seem to be functioning as expected. I suspect that directly inputting the path to the JSON variable may not be the correct ...

jquerycssjson

Establish the starting state of the store in a universal react-redux application using a NodeJS server with the integration of react-router

I'm having trouble setting the initialState of my redux store from the NodeJS server. I need help figuring out what I missed and how to make it work properly. Here's a snippet from my server.js const express = require('express'); cons ...

node.jsreactjsreduxreact-routerreact-redux

How can you integrate Dygraph into your React project alongside redux?

Lately, I've been facing some challenges while trying to integrate Dygraph into React (utilizing Redux). The Dygraph wrapper packages available on NPM don't seem to cooperate. Furthermore, the conventional method of using: <div id="graph"> ...

javascriptreactjsreact-routerreact-reduxdygraphs

Revise a catalog when an object initiates its own removal

When rendering a card in a parent component for each user post, all data is passed down through props. Although the delete axios call works fine, I find myself having to manually refresh the page for updates to be displayed. Is there a way to have the UI ...

javascriptreactjs

Utilizing form data binding with multiple instances of forms in React

Parent Component Within my parent component, named Users, there is a snippet of code that includes the functions for adding and updating users: addUser(index, user) { var users = this.state.users var existingUser = users[index] if (existingUse ...

reactjsdata-bindingnext.js

Underline Rows in CSS

When designing my website, I decided to organize the content into rows using CSS instead of tables. To create a line separating each row, I used height:px; for each row manually. However, this method resulted in the line jumping around inconsistently acr ...

csshtmlrowborder

Guide to customizing CSS styles within a div element using TypeScript code in a Leaflet legend

I'm struggling to add a legend to my map using Angular 5 and typescript. I need help with setting CSS styles for the values (grades) that are displayed on the legend. Can someone guide me on where to put the styles? TS: createLegend() { let lege ...

htmlcsstypescriptwebangular5

Changing the name of a tab within a p-tabview

Setting up a p-tabview with tabs containing specific content involves the following code: <p-tabView class="tabmain" > <ng-container *ngFor="let tab of tabs"> <p-tabPanel [header]="tab.header" > ...

cssangulartypescriptprimengprimeng-turbotable

Bootstrap - Keeping track of the collapse state of <div> elements after page refresh

Looking for some guidance as a javascript/jquery beginner - I am utilizing Bootstrap along with data-toggle and collapse classes to display or hide divs. I have been searching online trying to find a solution that will maintain the state of all divs, wheth ...

javascriptjquerycsstwitter-bootstrap

Leveraging a returned value from a function in Typescript within a React component

I am currently facing a challenge where I need to extract values from a Typescript function and use them to dynamically render a React page. Specifically, the two values I am working with are the outputs of getIcon() and getSpaces(). This is how I attempt ...

reactjstypescript

How to display an IconButton within a MenuItem only when it's not selected

How can I display an icon button inside an option (<MenuItem/>) like this? Additionally, how can I make the icon button invisible if it is selected? This is my current script: <TextField label="Payment Method History" select full ...

reactjsnext.jsmaterial-uiweb-frontend

Troubleshooting: AppBar Logo Display Issue with Material UI and React

There seems to be an issue with the logo not displaying on my AppBar. Here is the code I have: import { AppBar, Toolbar, Typography, makeStyles, Button, IconButton, Drawer, Link, MenuItem, } from "@material-ui/cor ...

reactjsmaterial-ui

Eliminating Google Adsense from Blog Posts

In each of my posts, I manually insert one Adsense unit. Here is the code: <div id="toppostad" style="float: left"> Adsense code </div> Initially, I assigned an id to the div when placing the code with the intention of using display:none; to ...

htmlcssbloggeradsense

Design a personalized button with a hand-shaped image using CSS

I am aiming to design a unique custom button that resembles the shape of a hand featured in this image, with the intention of adding some functionality to it later. My attempts so far have involved using an SVG path created in GIMP within a button, but all ...

htmlcss