Can't resolve less file load with Ant design less files

[KInGATiLLa]

I creating a project using Ant design React and bundler is esbuild. But when I start dev environment it shows error below.

OS: Windows 10 pro NodeJS: 14.16 Esbuild: 0.11.16 esbuild-plugin-less: 1.0.5 react: 17.0.2 antd: 4.15.3

How to configure less files with ant design less?

[iam-medvedev]

Importing files with ~ is not supported by native less compiler. This feature has been implemented in webpack less-loader, but it was deprecated.

Instead, you can import files without ~. For example:

@import 'antd/dist/antd.less';

p.s. Note that for the antd package you need to enable the javascriptEnabled option in lessLoader.

lessLoader({
  javascriptEnabled: true
})

[dave-irvine]

Hi, I'm also having this similar issue even though I've removed the ~.

Here's the output:

✔ ~/Projects/snip/monorepo/packages/dashboard-redux [feature/dashboard_redux L|✚ 2…1] 
11:16 $ yarn run dev
yarn run v1.22.5
$ node scripts/dev.mjs
(node:30777) ExperimentalWarning: The ESM module loader is experimental.
Listening on ::3000
 > light-theme.less:1:0: error: [plugin: less-loader] 'antd/lib/style/color/colorPalette.less' wasn't found. Tried - antd/lib/style/color/colorPalette.less,/home/davei/Projects/snip/monorepo/packages/dashboard-redux/src/assets/less/antd/lib/style/color/colorPalette.less,npm://antd/lib/style/color/colorPalette.less,antd/lib/style/color/colorPalette.less
     1 │ @import "antd/lib/style/color/colorPalette.less";
       ╵ ^
   src/App.jsx:19:7: note: The plugin "less-loader" was triggered by this import
    19 │ import './assets/less/light-theme.less';
       ╵        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

This is in a yarnv1 monorepo/workspace, but the file is definitely there:

✘-1 ~/Projects/snip/monorepo/packages/dashboard-redux [feature/dashboard_redux L|✚ 2…1] 
11:16 $ head node_modules/antd/lib/style/color/colorPalette.less 
/* stylelint-disable no-duplicate-selectors */
@import "bezierEasing";
@import "tinyColor";

// We create a very complex algorithm which take the place of original tint/shade color system
// to make sure no one can understand it 👻
// and create an entire color palette magicly by inputing just a single primary color.

My lessloader config looks like:

      lessLoader({
        math: 'always',
        javascriptEnabled: true,
      }),

[dave-irvine]

Ah nevermind, to fix it:

lessLoader({
        paths: ['node_modules/'],
        math: 'always',
        javascriptEnabled: true,
      }),