[Bug]: source.alias within less url("@alias/path/to/resource.tft") not resolved

[konrad-marzec]

System Info

  System:
    OS: Linux 6.5 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
    CPU: (20) x64 Intel(R) Core(TM) i9-9820X CPU @ 3.30GHz
    Memory: 37.70 GB / 46.73 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.0/bin/npm
    pnpm: 8.15.1 - ~/.nvm/versions/node/v20.11.0/bin/pnpm
  Browsers:
    Chrome: 122.0.6261.69

Details

  × Resolve error: Can't resolve 'ui/mixins/@alias/assets/fonts/font.eot' in '/mnt/projects/projects/rspack/app000'
   ╭─[1:1]
 1 │ @font-face {
 2 │   font-family: "font-family";
 3 │   src: url("ui/mixins/@alias/assets/fonts/font.eot");
   ·        ───────────────────────────────────────────────────────────────────────────
 4 │   src: url("ui/mixins/@alias/assets/fonts/font.eot#iefix") format("embedded-opentype"), url("ui/mixins/@alias/assets/fonts/font.woff") format("woff"), url("ui/mixins/@alias/assets/fonts/font.ttf") format("truetype");
 5 │   font-weight: 400;
   ╰────

Reproduce link

No response

Reproduce Steps

1. configure aliases

   // rsbuild.config.ts
   
   source: {
   alias: {
     '@alias': resolve(__dirname, 'app000'),
   }
   },

2. use it in less file

   
   // styles.less

@font-face { font-family: "font-family"; src: url("@alias/path/to/font.eot") format("eot"); }

[xc2]

please considers removing less.rootpath or duplicating alias configs with rootpath prefixed like "ui/mixins/@alias": "@alias"

[xc2]

please considers removing less.rootpath or duplicating alias configs with rootpath prefixed like "ui/mixins/@alias": "@alias"

@konrad-marzec could you please share more feedback on if it works?

[konrad-marzec]

The following config solves the problem. However it is not optimal. In long term I would like to define aliases in single place. In webpack css-loader combined with less-loader or sass-loader does the work.

export default defineConfig({
  source: {
    alias: {
      '@app000': resolve(__dirname, 'app000'),
      '@app001': resolve(__dirname, 'app001'),
    }
  },
  tools: {
    less: {
      lessOptions: {
        javascriptEnabled: true,
        paths: [resolve(__dirname, 'app000'), resolve(__dirname, 'app001')],
      },
    }
  },
  plugins: [pluginReact()]
});