改善 WebPack 中的 CSS 调试体验答案

【问题标题】：Improve CSS debugging experience in WebPack改善 WebPack 中的 CSS 调试体验
【发布时间】：2018-09-26 10:37:52
【问题描述】：

我最近从基于 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 个内联样式）并单击样式标签链接（以前需要我到具有正确行号的 CSS 文件）现在只带我到 <style> 标记的开头。

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

【问题讨论】：

标签： css webpack webpack-style-loader

【解决方案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 }
            }
        ],
    })
},

【讨论】：