[Bug]: static resource can not resolve from public path in css file.

[jackchoumine]

Version

version info:

"@rsbuild/core": "^1.0.1-rc.5",

Details

There are some img in public:

public/imgs/wms-0-params.png

use it in vue3 component:

<template>
  <div class="main-wrapper flex flex-1 flex-col">
    <p>hello world</p>
    <!-- NOTE  work well -->
    <img src="/imgs/wms-0-params.png" alt="" srcset="" />
  </div>
</template>

<style lang="scss" scoped>
p {
  color: red;
  /* NOTE can not work Error: HookWebpackError: Cannot find module '/imgs/wms-0-params.png' */
  background-image: url('/imgs/wms-0-params.png');
}
</style>

in css part, it can not reslove img path:

Error: HookWebpackError: Cannot find module '/imgs/wms-0-params.png'

rsbuild/core@^0.4.6 work well

Related issue: #3374

Someone say put img into src/assets path then use img by relative path. It is not good migration way.

It is a barrier for migration from vite.

Reproduce link

无

Reproduce Steps

无

[liu-collab]

you can do this

tools: {
      cssLoader: { url: { filter: (url) => !url.includes('imgs') } },
    },

[9aoy]

Rsbuild uses css-loader by default to handle CSS resources.You can use the cssLoader.url option to filter the public resource path like the example above.

If you use experiments.css, you can use rspack.IgnorePlugin to ignore public resources path. webpack/webpack#14893 (comment)