Question

我最近从基于Gulp的构建系统迁移到WebPack（v3），并且在很大程度上它非常好。然而，我正在努力使CSS开发经验与之前的相符。

我使用SASS编写CSS，然后在WebPack中使用以下设置

Module.Rules：

{
    test: /\.(s*)css$/,
    exclude: /node_modules/,
    use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
            {
                loader: 'css-loader',
                options: { minimize: isProd }
            },
            {
                loader: "postcss-loader"
            },
            {
                loader: 'sass-loader'
            }
        ],
    })
},

插件：

new ExtractTextPlugin({
    filename: 'app.bundle.css',
    disable: !isProd
}),

因此，当我处于开发状态时，!isProd ExtractTestPlugin被禁用，并使用style-loader的后备。这允许Hot CSS替换。如果没有这个，则必须刷新整个页面以显示CSS更新。

这一切都很有效，我改变了CSS并在一瞬间将它显示在屏幕上，然而，尝试调试CSS选择器所处的文件或规则是有问题的。

在这种情况下，我想查看导致font-size为1.5rem的样式。我不相信它在我的CSS中（我认为它是第三方库），但它几乎不可能找到原因（我添加了~50个内联样式）并单击样式标记链接（之前需要我使用正确行号的CSS文件）现在只需将我带到<style>标记的开头。

如何改善这种体验？我对一个正常链接的app.bundle.css文件感到满意（不是内联 - 所以我得到行号）但我真的想保留HMR for CSS。

Answer 1

事实证明，通过添加源地图，它可以有效地掩盖传递方法（样式标签），并为浏览器提供指向正确工作的源代码的直接链接。

有关详细信息，请参阅此github帖子。

这是我的最终CSS WebPack代码

{
    test: /\.(s*)css$/,
    exclude: /node_modules/,
    use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
            {
                loader: 'css-loader',
                options: { minimize: isProd, sourceMap: true }
            },
            {
                loader: "postcss-loader",
                options: { sourceMap: true }
            },
            {
                loader: 'sass-loader',
                options: { sourceMap: true }
            }
        ],
    })
},

改善WebPack中的CSS调试体验

1 个答案: