[Bug]: @rsbuild/plugin-vue2 runs duplicating loaders for less code in sfc

[xc2]

Version

System:
    OS: macOS 14.4.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 31.81 MB / 32.00 GB
    Shell: 3.7.1 - /usr/local/bin/fish
  Browsers:
    Chrome: 123.0.6312.123
    Safari: 17.4.1
  npmPackages:
    @rsbuild/core: workspace:0.0.0 => 0.6.1 
    @rsbuild/plugin-vue2: workspace:0.0.0 => 0.6.1

Details

it is reported that all loaders for the less rule run twice for less code in vue2 sfc.

i added a loader for observing the loader list, and here's what it shows:

{
  '$resource': 'index.less',
  loaderIndex: 2,
  '$loaders': [
    '../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@rsbuild/shared/compiled/postcss-loader/index.js',
    '../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@rsbuild/shared/compiled/less-loader/index.js',
    '../debug-loader.js'
  ]
}
{
  '$resource': 'App.vue?vue&type=style&index=0&id=1b960a7f&prod&scoped=true&lang=less',
  loaderIndex: 6,
  '$loaders': [
    '../node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vue-loader/lib/loaders/stylePostLoader.js',
    '../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@rsbuild/shared/compiled/postcss-loader/index.js',
    '../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@rsbuild/shared/compiled/less-loader/index.js',
    '../debug-loader.js',
    '../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@rsbuild/shared/compiled/postcss-loader/index.js',
    '../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@rsbuild/shared/compiled/less-loader/index.js',
    '../debug-loader.js',
    '../node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vue-loader/lib/index.js'
  ]
}
{
  '$resource': 'App.vue?vue&type=style&index=0&id=1b960a7f&prod&scoped=true&lang=less',
  loaderIndex: 3,
  '$loaders': [
    '../node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vue-loader/lib/loaders/stylePostLoader.js',
    '../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@rsbuild/shared/compiled/postcss-loader/index.js',
    '../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@rsbuild/shared/compiled/less-loader/index.js',
    '../debug-loader.js',
    '../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@rsbuild/shared/compiled/postcss-loader/index.js',
    '../node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@rsbuild/shared/compiled/less-loader/index.js',
    '../debug-loader.js',
    '../node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vue-loader/lib/index.js'
  ]
}

Setup

rsbuild.config.ts

import { defineConfig } from "@rsbuild/core";
import { pluginVue2 } from "@rsbuild/plugin-vue2";

export default defineConfig({
  plugins: [pluginVue2()],
  output: { cleanDistPath: true },
  dev: { progressBar: false },
  tools: {
    bundlerChain(chain, { CHAIN_ID }) {
      chain.module.rule(CHAIN_ID.RULE.LESS).use("debug").loader(require.resolve("../debug-loader"));
    },
    rspack(config) {
      return config;
    },
  },
});

debug-loader.js

const NodePath = require("node:path");

module.exports = function debugLoader(code) {
  console.log({
    $resource: NodePath.relative(this.context, this.resource),
    loaderIndex: this.loaderIndex,
    $loaders: this.loaders.map((l) => NodePath.relative(process.cwd(), l.path)),
  });
  return code;
};

Reproduce link

https://github.com/xc2/rsbuild-vue-repro/tree/vue27-less-duplicating-loaders/vue27-less

Reproduce Steps

run rsbuild build in vue27-less

[xc2]

it's a vue-loader@15 bug that only happens when experiments.css is on.

thus either vuejs/vue-loader#2071 or #1577 should fix this issue.

[chenjiahan]

awesome 👍🏻