webpack4 引入stylus和css， npm run build后.styl文件沒有提取出來

webpack4 引入stylus 和css， build后.styl文件沒有提取出來

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')
    ]
  }

但是webpack.config.dev.js, 開發(fā)環(huán)境時，.styl的樣式是正常被插入到index.html的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: {
                        // 這里postcss直接使用stylus編譯后的tree進行編譯，提高效率
                        sourceMap: true,
                        }
                    },
                    'stylus-loader']
            }
        ]
    },
    plugins: [
       // 略... 
    ]
})

index.styl

main.css

npm run build后生成單獨的文件app.hash.css

npm run dev