[Bug]: cannot compatible the ~ in less-loader

[priority3]

Version

System:
    OS: macOS 12.7.2
    CPU: (8) arm64 Apple M1
    Memory: 135.14 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Browsers:
    Chrome: 128.0.6613.138
    Safari: 15.6.1
  npmPackages:
    @rsbuild/core: ^1.0.1 => 1.0.1 
    @rsbuild/plugin-less: ^1.0.1 => 1.0.1 
    @rsbuild/plugin-react: ^1.0.1 => 1.0.1

Details

• this is an error when compiler the less file
  
  less-loader,although the ~ has been deprecated, But when migrating some old projects to Rsbuild, I don't want to change a lot of existing CSS file.
• it's working in rsbuildv0.5.9
  

Reproduce link

https://github.com/priority3/rebuild-less-loader/blob/main/src/App.less#L1

Reproduce Steps

change @import '~@animate' to @import '@animate' everything is working.

[9aoy]

The special processing of ~ import in less-loader causes ~@animate to be processed into @animate/, which is a special case.
see: https://github.com/webpack-contrib/less-loader/blob/master/src/utils.js#L75-L77

[priority3]

The special processing of ~ import in less-loader causes ~@animate to be processed into @animate/, which is a special case. see: webpack-contrib/less-loader@master/src/utils.js#L75-L77

yeah， thks so mush ! This helped me solve the problem very well; just replace the @animate to @animate/ in rsbuild.config.ts / alias everything is working; but after my testing, this issue only appeared after upgrading to version 1.0, and was completely normal in previous versions.

[9aoy]

This error occurs because rspack uses the native parser in the loader, see #4945.

In my test, when setting the @animate alias as below, enhance-resolve can handle this case @animate/ => node_modules/animate.less/animate.less, but rspack can't handle this. @SyMind Can you help confirm whether this error in this scenario is as expected?

    alias: {
      "@animate": "./node_modules/animate.less/animate.less",
    },

[chenjiahan]

@SyMind cc

[SyMind]

I will work on it this weak.