【Vue】ComponentのStyleにstylusを設定するとスタイルが反映されない

Question

vueコンポーネントでstylusを使いたいのですが、スタイルが認識されていないのか、コンポーネントのスタイルが変わりません。

コンパイルにはwebpackを使用しています。
webpack.config.jsの設定に不備があるのか、ローダーが足りないのか分からず質問させていただきました。

コンポーネントのstyleタグでstylusを使うには設定し忘れがあるのでしょうか？

状況

• vueのコンポーネントのstyleタグで、langをstylusに設定してビルドする。
  • ビルド自体は成功するが、設定したスタイルが反映されない。
• stylusファイルをコンパイルする場合は正しくcssファイルにコンパイルできる。

ライブラリのバージョン

ライブラリ名	バージョン
webpack	^4.44.1
stylus	^0.54.8
stylus-loader	^3.0.2
css-loader	^4.2.1

ソース

package.js

stylusを処理するために必要な下記のライブラリはインストール済みです。

• stylus
• stylus-loader
• css-loader

{
  "name": "vuestylussample",
  "version": "1.0.0",
  "description": "My webpack project",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "node_modules/webpack/bin/webpack.js --mode=development",
    "start": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@webpack-cli/init": "^0.2.2"
  },
  "devDependencies": {
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "css-loader": "^4.2.1",
    "html-webpack-plugin": "^4.3.0",
    "mini-css-extract-plugin": "^0.9.0",
    "pug": "^3.0.0",
    "pug-plain-loader": "^1.0.0",
    "stylus": "^0.54.8",
    "stylus-loader": "^3.0.2",
    "terser-webpack-plugin": "^4.0.0",
    "vue": "^2.6.11",
    "vue-loader": "^15.9.3",
    "vue-template-compiler": "^2.6.11",
    "vue-template-loader": "^1.1.0",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0",
    "workbox-webpack-plugin": "^5.1.3"
  }
}

webpack.config.js

const path = require('path');
const { HtmlWebpackPlugin } = require('html-webpack-plugin');

const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
    entry: {
        'index': [
            path.resolve(__dirname, 'src/js/index.js')
        ],
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: "/"
    },
    module: {
        rules: [
            {
                test: /.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /.styl(us)?$/,
                oneOf: [
                    {
                        resourceQuery: /^?vue/,
                        use: [
                            'vue-style-loader',
                            'css-loader',
                            'stylus-loader'
                        ]
                    },
                    {
                        use: [
                            'css-loader',
                            'stylus-loader'
                        ]
                    }
                ],
            },
        ]
    },
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        openPage: 'index.html',
        watchContentBase: true,
        inline: true,
        port: 8080,
        historyApiFallback: true,
        noInfo: true,
    },
    resolve: {
        extensions: ['.js', '.json','.vue'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
        }
    },
};

コンポーネントを呼び出す元のファイル

コンポーネントを呼び出しているだけです。

import Vue from 'vue';
import HelloComponent from './components/Hello';

new Vue({
    el: '#app',
    components: {
        HelloComponent
    }
});

コンポーネント

<template>
    <div>
        <p class="foo">こんにちは</p>
    </div>
</template>

<script>
import Vue from 'vue';
export default Vue.extend({
    name: 'hello-component'
})
</script>

<style lang="stylus">
.foo
    color red
</style>

試した事

styleのlangをscssに変える

ローダーをscssに変えた所、スタイルが反映されました。
styleタグ自体は機能しているはずなのですが、stylusに変えると機能しません。

//...
<style lang="scss">
.foo {
    color red
}
</style>