Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
priority3 opened this issue Sep 23, 2024 · 4 comments
Open

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

priority3 opened this issue Sep 23, 2024 · 4 comments
Assignees
Labels
🐞 bug Something isn't working

Comments

@priority3
Copy link

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
    image
    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
    image

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.

@priority3 priority3 added the 🐞 bug Something isn't working label Sep 23, 2024
@9aoy
Copy link
Collaborator

9aoy commented Sep 24, 2024

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

image

@priority3
Copy link
Author

priority3 commented Sep 24, 2024

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

image

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
Copy link
Collaborator

9aoy commented Sep 25, 2024

This error occurs because rspack uses the native parser in the loader, see web-infra-dev/rspack#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",
    },

20240925-150317

@chenjiahan
Copy link
Member

@SyMind cc

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐞 bug Something isn't working
Projects
None yet
Development

No branches or pull requests

4 participants