[Bug]: Migrate vue3 [vue-cli] to Rsbuild 【stylus】

[runkobe24]

Version

System:
OS: Windows 11 10.0.22621
CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700
Memory: 11.49 GB / 31.68 GB
Binaries:
Node: 18.20.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 10.5.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Chromium (127.0.2651.74)
Internet Explorer: 11.0.22621.3527

Details

This is my current 【rsbuild.config.ts】 configuration:

import { defineConfig } from '@rsbuild/core';
const path = require('path')
import { pluginVue } from '@rsbuild/plugin-vue';
import { pluginStylus } from '@rsbuild/plugin-stylus';
const { VueLoaderPlugin } = require("vue-loader");
// 开发目录
const devPath = path.resolve(__dirname, 'src')

export default defineConfig({
  dev: {
    assetPrefix: './'
  },

  html: {
    template: './public/index.html',
  },

  source: {
    // 指定入口文件
    entry: {
      index: './src/main.ts',
    },

    alias: {
      // '@': './src',
      antd: 'ant-design-vue'
    },
  },

  plugins: [
    pluginVue(),
    pluginStylus({
      stylusOptions: {
        import: './src/lib/stylus/vars.styl'
      }
    })
  ],

  tools: {
    rspack: {
      plugins: [new VueLoaderPlugin()],
    },
  },
});

Reproduce link

https://codesandbox.io/p/devbox/exciting-mopsa-7jhpsw?file=%2Frsbuild.config.ts%3A1%2C1-46%2C1

Reproduce Steps

yarn dev

[runkobe24]

If I delete stylusOptions, an error will be reported： TypeError: expected rgba or hsla, but got ident:$primary-color；

If I don't delete it, this error will appear again： Module build failed: ╰─▶ × Error: RspackResolver(NotFound("s"))

[chenjiahan]

There is a type issue in @rsbuild/plugin-stylus, we will fix the type with https://github.com/web-infra-dev/rsbuild/pull/3972

The correct usage is:

pluginStylus({
  stylusOptions: {
    import: [path.join(__dirname, "./src/lib/stylus/vars.styl")],
  },
})