改进 CSS WebPack 中的调试体验

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 的后备。这允许热 CSS 替换。如果没有这个，整个页面将不得不刷新以显示 CSS 更新。

这一切都很好，我更改了 CSS，一瞬间它显示在屏幕上，但是，尝试调试 CSS 选择器所在的文件或规则被证明是有问题的。

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

我怎样才能改善这种体验？我对一个 link 正常编辑的 app.bundle.css 文件感到满意（不是内联 - 所以我得到行号）但我真的想为 CSS.[=21 保留 HMR =]

Answer 1

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

查看此 github post 了解一些信息。

这是我最终的 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 }
            }
        ],
    })
},

改进 CSS WebPack 中的调试体验

Improve CSS debugging experience in WebPack

css

webpack

webpack-style-loader