the .styl file was not extracted after webpack4 introduced stylus and css, build

index.js

import "./index.styl" app.[hash:8].css
import "./main.css" // main.css 

webpack.config.prod.js

module.exports = merge(webpackCommon, {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ExtractPlugin.extract({
                    fallback: "style-loader",
                    use: [
                        "css-loader"
                    ]
                })
            },
            {
                test: /\.styl/,
                use: ExtractPlugin.extract({
                    fallback: "style-loader",
                    use: [
                        "css-loader",
                        {
                            loader: "postcss-loader",
                            options: {
                                sourceMap: true 
                            },
                        },
                        "stylus-loader"
                    ]
                })
            }
        ]
    },
    plugins: [
        // ...
        new ExtractPlugin("app.[hash:8].css")
    ]
  }

but in the webpack.config.dev.js, development environment, the .styl style is normally inserted into index.html "s head

module.exports = merge(webpackCommon, {
    // ...
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            },
            {
                test: /\.styl$/,
                use: [
                    "style-loader",
                    "css-loader",
                    {
                    loader: "postcss-loader",
                    options: {
                        // postcssstylustree
                        sourceMap: true,
                        }
                    },
                    "stylus-loader"]
            }
        ]
    },
    plugins: [
       // ... 
    ]
})

index.styl

main.css

npm run buildapp.hash.css

npm run dev