webpack4 引入stylus和css, npm run build后.styl文件没有提取出来

发布于 2022-09-07 16:20:18 字数 2447 浏览 30 评论 0

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

鸠书 2022-09-14 16:20:18

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文