Cannot use Stylus in Vue 3 + Farm project. How to resolve?

[jdkcoder]

I cannot create a reproduction on StackBlitz because of unsupported platform so here is the repo: https://github.com/jdkcoder/farm-vue3

I have tried these ways but none of them worked, even I already installed stylus & stylus-loader

• write directly in <style lang="stylus"> in .vue file
• `@import "@/assets/styles/test.styl" in .vue file
• import directly into index.ts file
• put into index.html as stylesheet
• seperated to .styl file, then repeat importing

Errors I got when writing directly into style tag

Errors I got when seperated into .styl file then import to style tag, index.html, index,ts

test.stlyl

body
    background #000

package.json

{
  "name": "vue-example",
  "version": "1.0.0",
  "scripts": {
    "dev": "farm start",
    "build": "farm build",
    "preview": "farm preview",
    "clean": "farm clean"
  },
  "dependencies": {
    "vue": "latest",
    "vue-router": "latest"
  },
  "devDependencies": {
    "@farmfe/cli": "latest",
    "@farmfe/core": "latest",
    "@vitejs/plugin-vue": "latest",
    "core-js": "latest",
    "stylus-loader": "latest",
    "stylus": "latest"
  }
}

farm.config.ts

import { defineConfig } from '@farmfe/core';
import vue from '@vitejs/plugin-vue';
import path from 'node:path'

export default defineConfig({
  vitePlugins: [
    vue(),
  ],
  compilation: {
    resolve: {
      alias: {
        '@': path.join(process.cwd(), 'src'),
      }
    },
    sourcemap: false
  },
});

index.ts

import { createApp } from 'vue';
import router from './router'
import App from './App.vue';
import './styles.css'

const app = createApp(App)
app.use(router)
app.mount('#app')

[wre232114]

A stylus farm plugin is needed to use stylus in Farm, we may implement the plugin later. Just use api of stylus to compile the stylus module to css module in transform hook