React项目编译LESS文件失败，Ant Design组件库LESS报错求助

Hey there! Let's troubleshoot the LESS-related errors you're seeing when using Ant Design in your React project. The "unrecognized comment syntax" error you mentioned is a common red flag that your project isn't set up to process LESS files properly, or there's a simple configuration misstep you might have missed. Let's break down the fixes step by step:

1. Fix the Filename Mixup (Most Likely Culprit!) #

Looking at your code, you've written LESS syntax (like @import '~antd/dist/antd.less') in a file named App.css. Here's the problem: CSS loaders don't recognize LESS-specific syntax like // comments or importing .less files.

• Rename App.css to App.less
• Update your component import to use the new file:

  import './App.less'; // instead of App.css
  

This alone might resolve the comment-related error, as the file will now be processed by a LESS loader instead of a CSS loader.

2. Install Required Dependencies #

Make sure you have the necessary packages to compile LESS in your React project:

# Using npm
npm install less less-loader --save-dev

# Using yarn
yarn add less less-loader --dev

Note: If you're using Webpack 5, stick to less-loader@8.x or higher. For Webpack 4, use less-loader@7.x.

3. Configure Your Build Tool to Process LESS #

If You're Using Create React App (CRA) #

CRA doesn't support LESS out of the box, so you'll need to use craco to override the default config:

1. Install craco and the LESS plugin:

   npm install @craco/craco craco-less --save-dev
   

2. Update your package.json scripts to use craco:

   "scripts": {
     "start": "craco start",
     "build": "craco build",
     "test": "craco test"
   }
   

3. Create a craco.config.js file in your project root with this configuration (critical for Ant Design's LESS files):

   const CracoLessPlugin = require('craco-less');
   
   module.exports = {
     plugins: [
       {
         plugin: CracoLessPlugin,
         options: {
           lessLoaderOptions: {
             lessOptions: {
               javascriptEnabled: true, // Required for Ant Design's LESS
             },
           },
         },
       },
     ],
   };
   

The javascriptEnabled option lets LESS parse JavaScript expressions, which Ant Design uses in its stylesheets.

If You're Using Custom Webpack Config #

Add this rule to your webpack.config.js to handle LESS files:

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          'style-loader', // Injects styles into the DOM
          'css-loader', // Resolves CSS imports
          {
            loader: 'less-loader',
            options: {
              lessOptions: {
                javascriptEnabled: true,
              },
            },
          },
        ],
      },
    ],
  },
};

4. Verify Your Setup #

After making these changes, restart your development server. The comment syntax error should disappear, and Ant Design's LESS styles should compile correctly. If you still run into issues, double-check that:

• All .less files are being imported correctly in your components
• Your dependencies are up to date (no version conflicts between webpack, less-loader, and less)

内容的提问来源于stack exchange，提问作者Winston Zhao