无需eject，如何在Create React App中集成Less？尝试相关模块失败

Hey there, I totally get the frustration—those older react-app-rewire-* packages can be hit-or-miss these days, especially since Create React App has evolved. Let’s walk through a reliable way to set up Less without ejecting, using tools that are actively maintained:

Step 1: Clean Up Conflicting Packages #

First, let’s remove the problematic packages you installed to avoid conflicts:

# Using npm
npm uninstall react-app-rewire-less react-app-rewire-less-modules

# Using yarn
yarn remove react-app-rewire-less react-app-rewire-less-modules

Step 2: Install Required Dependencies #

We’ll use react-app-rewired (to override CRA config without ejecting) and customize-cra (a helper that makes config overrides easier), plus Less and its loader:

# Using npm
npm install react-app-rewired customize-cra less less-loader --save-dev

# Using yarn
yarn add react-app-rewired customize-cra less less-loader --dev

Step 3: Update Your Package.json Scripts #

Replace the default react-scripts commands with react-app-rewired in your package.json:

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject" // Keep this as-is in case you ever need it
}

Step 4: Create a Config Override File #

In your project root (same folder as package.json), create a file named config-overrides.js with the following code:

Basic Less Support (Global Styles)

If you just want to use regular Less files (not CSS Modules):

const { override, addLessLoader } = require('customize-cra');

module.exports = override(
  addLessLoader({
    lessOptions: {
      javascriptEnabled: true, // Required if you're using Less variables in JS or frameworks like Ant Design
      // Optional: Add custom Less variables here
      // modifyVars: { '@primary-color': '#your-custom-color' },
    },
  })
);

Less with CSS Modules

If you need CSS Modules (scoped styles), update the addLessLoader config to include module settings:

const { override, addLessLoader } = require('customize-cra');

module.exports = override(
  addLessLoader({
    lessOptions: {
      javascriptEnabled: true,
    },
    modules: {
      localIdentName: '[local]--[hash:base64:5]', // Generates unique class names for scoped styles
    },
  })
);

For CSS Modules, name your Less files like ComponentName.module.less and import them like this:

import styles from './ComponentName.module.less';

// Use in your component:
<div className={styles.container}>...</div>

Step 5: Test It Out #

Create a sample Less file (e.g., App.less):

.container {
  padding: 2rem;
  background-color: #f0f0f0;
  h1 {
    color: #2c3e50;
  }
}

Import it in your App.js:

import './App.less';

function App() {
  return (
    <div className="container">
      <h1>Less is Working!</h1>
    </div>
  );
}

Run npm start or yarn start—your Less styles should apply without errors!

Troubleshooting Tips #

• If you get version compatibility errors with less-loader, try installing a specific version that matches your CRA version. For CRA 5.x, less-loader@10.x or less-loader@11.x usually works well.
• Make sure javascriptEnabled is set to true if you’re using Less variables in your JS or integrating with UI libraries like Ant Design.

内容的提问来源于stack exchange，提问作者Nugzar Gagulia