When utilizing customize-cra to modify antd less variables, it results in the generation of numerous redundant CSS files during the build

While utilizing customize-cra to override antd less variable, I have encountered an issue where it generates multiple duplicate CSS files during the build process.

According to the documentation provided by antd, if I opt for the default import of CSS by including the following line:

@import '~antd/dist/antd.css';

It results in a combined file size of 1.5MB (including my custom CSS) after the build.

However, upon removing the @import '~antd/dist/antd.css'; line and implementing customize-cra with the following code:

const { override, fixBabelImports, addLessLoader } = require('customize-cra');
const overrideVariables = require('./src/styles/overrideVariables');

module.exports = override(
 fixBabelImports('import', {
   libraryName: 'antd',
   libraryDirectory: 'es',
   style: true,
 }),
 addLessLoader({
   javascriptEnabled: true,
   modifyVars: overrideVariables,
 }),
);

The resultant CSS files now total 6MB (including my custom CSS) post-build. Is there a correct way to implement this or any alternative solution available?

cssreactjssassantd

Answer №1

If you're looking to enhance your setup, I would suggest utilizing craco. Additionally, the craco-antd plugin is a fantastic option that perfectly aligns with your requirements.

Enhance your configuration with craco:

module.exports = {
  plugins: [
    {
      plugin: require('craco-antd'),
      options: {
        lessLoaderOptions: {
          noIeCompat: true
        }
      }
    }
  ]
};

You can then easily customize your variables in the antd.customize.less file:

@primary-color: #1da57a;
@link-color: #1da57a;

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

Upon installing React using the 'create react app' command and adding additional packages, the package.json file is updated

I am completely new to working with React. I followed the steps to create a React application using the command 'create react app'. After running the command, various files and directories were generated in the root directory, such as package.js ...

reactjsdependenciescreate-react-app

I'm having trouble with Next Js identifying my specific "key". What could be the issue?

I can't seem to understand why my Unique Key is not functioning properly. It has worked fine in the past, so why is it failing this time around? Every child in a list should have a unique "key" prop. {props.kokoActors.map((kokoActor) => { return ...

reactjsnext.js

Steps to creating an elliptical border using CSS

Is there a way to apply CSS styles specifically to the left border of a div to achieve an elliptical shape, while keeping other borders normal? I've managed to create a semi-ellipse with the following code, but the rest of the border remains unchanged ...

javascripthtmlcss

Tips for setting up and utilizing browserify in a Laravel project?

Currently, I am working on a project using Laravel and incorporating React.js for dynamic views. However, in order to organize my react scripts into different modules, I realized the need to install browserify. Unfortunately, I am unfamiliar with npm and c ...

laravelnpmreactjsbrowserify

Is it possible to transfer a property between components without relying on the props object?

I created a component that showcases a variety of cafes. Inside this component ( CafeList.jsx), an axios request is triggered to fetch a list of cafes, which is then mapped over and displayed on the browser. I envision users being able to click on a spe ...

reactjsexpressmongoose

React remains unaffected by the state

I am currently facing an issue with a form that contains radio buttons and how it is being displayed in the browser using React add-in. The main concern here is why the value attribute is empty and why the onChange function, responsible for changing the s ...

reactjsradio-buttonreact-props

Error Encountered: React - Material UI | Unable to locate the module: 'material-ui/Button'

Currently, I am utilizing a Material UI button in my React application page. import Button from 'material-ui/Button' <Button color="primary" variant="raised"> Group </Button> The following packages have ...

javascriptreactjsmaterial-ui

HTML or JS/jQuery can create disorienting cursor behaviors

Is there a way to create a distorted or crooked mouse movement on a webpage, even though the user is moving the mouse normally? I'm exploring ways to simulate the experience of a Parkinson's or arthritic patient trying to navigate a web page wit ...

javascriptjqueryhtmlcss

The values entered in the React form inputs are not displaying accurately

I'm currently working on a project that involves creating a form for tours. Everything seems to be working well, except for the issue of input values getting mixed up. For example: Actual output: { tourName: 'pune darshan', location: &apos ...

javascriptnode.jsreactjsmongodb

What is the best way to add a simple Search bar to the Material UI Data Grid component?

If we take a look at this data grid example: check it out here I'd like to incorporate a simple search bar similar to the one shown here Can someone provide guidance on how to add this feature to Data Grid MUI? ...

javascriptreactjsdatagridviewhyperlinkmaterial-ui

Replace minor components (SVG) within the primary SVG illustration

I'm interested in transforming SVG elements into the main SVG element. For example, let's say the black square represents the main SVG element. I want to change elements 1, 2, and 3 to different SVG elements using JavaScript code. However, I am u ...

javascripthtmlcsssvg

Transfer my testing utilities from React Router version 5 to version 6

I am currently transitioning my project to React V6 router and encountering an issue with my test utility function. Every time I run the test, all my expectations fail because jest cannot locate the object. Has anyone faced this error during a similar migr ...

reactjstypescriptjestjsreact-routerreact-router-dom

Arranging rows with the option of ascending/descending order and the default sorting

I have a table with multiple columns like the following: id | name | amount | description I need to be able to sort each column by clicking on it - first in ascending order, then descending on the second click, and back to default on the third click, loo ...

sortingreactjsredux

Tips for utilizing dynamic variables when setting props in React Native styles

I am encountering an issue while trying to set props in the stylesheet to dynamically change the background color based on data received from the server. undefined is not an object (evaluating 'this.props.colorCode') Below is the snippet of my ...

cssreactjsreact-native

Challenge with dispatching actions in React-Redux

As someone who is new to React and Redux, I am currently facing an issue with triggering a function when a user clicks on a list item. Despite my efforts, I am struggling to properly attach the function to the list item and ensure that it flows through to ...

reactjsreduxreact-redux

Instructions on adding a solid border color to a circular div using CSS

Hey there! I'm curious, is it possible to style a straight border color on a rounded div using CSS? Here I have some basic Tailwind CSS code. <div class="rounded-2xl w-72 h-20 border-l-4 border-l-yellow-500"> ... </div> In the ...

css

The rsuite table does not properly reflect changes in state data

This is the render method that I am working on render() { return ( <Contentbox> <ol> {this.state.data.map((obj) => ( <li key={obj._id}>{obj.name}</li> ) ...

javascriptreactjsrsuite

I'm having trouble viewing the items listed under a specific office. Every time I look at the dropdown menu, it appears to be empty with no

When a specific office is selected, the corresponding items should be displayed: If the office chosen is Building Management Office, the items Spalding Basketball and Mikasa Volleyball should be shown. If the office chosen is Information Technology Resour ...

reactjsreact-hooksmaterial-uijsxreact-hook-form

Tips for customizing the checked color of Material UI Radio buttons

If I want my radio button to be green instead of the default options (default, primary, secondary), how can I achieve that? I attempted to override the color using the classes prop like this: const styles = theme => ({ radio: { colorPrimary: { ...

javascriptreactjsradio-buttonmaterial-ui

What is the best way to apply a Javascript function to multiple tags that share a common id?

I am experimenting with javascript to create a mouseover effect that changes the text color of specific tags in an HTML document. Here is an example: function adjustColor() { var anchorTags = document.querySelectorAll("#a1"); anchorTags.forEach(func ...

javascripthtmlcss