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, 开发环境时,.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

clipboard.png

main.css

clipboard.png

npm run build后生成单独的文件app.hash.css

clipboard.png

npm run dev

clipboard.png

阅读 4.4k
1 个回答

谢邀~问题是否解决?
可能是提取插件ExtractPlugin版本的问题。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题