How to add Stylus as CSS preprocessor in Aurelia 2 & Webpack 5

Question

So far I tried the following:

yarn add -D stylus-native-loader stylus mini-css-extract-plugin

Then in webpack.config.js I put:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
...
    module: {
      rules: [
        {
          test: /\.styl$/i,
          use: [
            { loader: MiniCssExtractPlugin.loader },
            { loader: 'css-loader', options: { sourceMap: true } },
            { loader: 'stylus-native-loader' }]
        },
        ...
      ]
    }
    ...
    plugins: [
        ...
      new MiniCssExtractPlugin()
    ].filter(p => p)

src/my-app.styl is simple

.message
  background-color red

But it does not produce any CSS file.
Instead I end-up with a message I don't understand:

WARNING in ./src/my-app.html 7:40-42
export 'default' (imported as 'd0') was not found in './my-app.styl' (module has no exports)
 @ ./src/my-app.js 3:0-46 4:41-53
 @ ./src/main.js 2:0-33 14:7-12

webpack 5.88.2 compiled with 1 warning in 148 ms

What am I doing wrong?