webpack4系列教程，如何设置css的sourcemap？

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

在webpack中，目前来说，设置js的sourcemap比较容易，但是设置css的sourcemap就困难多了。因为css的表现形式很多，有css、scss、less，scss和less作为特殊的css，是需要特殊处理的。

本文测试环境：win10、node@14.2.0、npm@6.14.4、webpack@4.43.0、mini-css-extract-plugin@0.9.0、css-loader@3.5.3、url-loader@4.1.0、less@3.11.1、less-loader@6.1.0、node-sass@4.14.1、sass-loader@8.0.2、postcss@7.0.30、postcss-loader@3.0.0、webpack-px2rem-loader@1.0.2。

基本设置

css-loader、sass-loader、less-loader、还有postcss-loader，都需要添加参数sourceMap:true。所以，基本上来看，就是在webpack.config.js里面，凭空多了很多个sourceMap:true的项目。

对于一个css/scss/less文件来说，有很多个loader，如果其中一个没有配置上sourceMap:true。那就可能是前功尽弃了。而且，通过上面的一个文章，可以看到：postcss里面的px2rem对scss/less文件的sourceMap有影响。

下面的例子，是个scss的配置，仅供参考。注意：css/scss/less都需要做类似的设置：

{
    test: /\.scss$/,
    include: [path.resolve(__dirname, 'src')],   // 限制打包范围，提高打包速度
    exclude: /node_modules/,                     // 排除node_modules文件夹
    use: [
        {
            loader: MiniCssExtractPlugin.loader,  
            options: {
                publicPath: '../',  //img图片路径
            },
        },
        {
            loader:'webpack-px2rem-loader',
            options:{
                basePx:100,
                floatWidth:2,
                min:1,
            }
        },
        {
            loader: 'css-loader',
            options: {
                sourceMap: true
            }
        },{
            loader: "postcss-loader",
            options: {
                sourceMap: true
            }
        },
        {
            loader: "sass-loader",
            options:{
                sourceMap:true,
            }
        }
    ]
},

重点就是满屏幕的sourceMap:true，相关的loader都要加上，除了px2rem和MiniCssExtractPlugin。然后，就是devtool这个值，要配置一个合适的值。在这里，苏南大叔配置的是：

devtool: 'inline-source-map',

相关链接：

• https://newsn.net/say/webpack-sourcemap.html

整体的效果就是：

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//...

module.exports = {
    //...
    plugins: [
        //...
    ],
    devtool: 'inline-source-map',
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                   //...
                ],
            },
            {
                test: /\.scss$/,
                include: [path.resolve(__dirname, 'src')], // 限制打包范围，提高打包速度
                exclude: /node_modules/, // 排除node_modules文件夹
                use: [{
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../', //img图片路径
                        },
                    },
                    {
                        loader: 'webpack-px2rem-loader',
                        options: {
                            basePx: 100,
                            floatWidth: 2,
                            min: 1,
                        }
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true
                        }
                    }, {
                        loader: "postcss-loader",
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: "sass-loader",
                        options: {
                            sourceMap: true,
                        }
                    }
                ]
            },
            {
                test: /\.less$/,
                use: [
                   //...
                ]
            },
            //...
        ]
    },
}

浏览器调试效果

效果还不错，css的sourcemap调试效果如下：

相关链接

• https://newsn.net/say/webpack-css.html
• https://newsn.net/say/webpack-less.html
• https://newsn.net/say/webpack-scss.html
• https://newsn.net/say/webpack-px2rem.html
• https://newsn.net/say/webpack-sourcemap.html
• https://newsn.net/say/webpack-start.html

总结

在本文中，因为设置了devtool: 'inline-source-map'，可能会影响js的sourcemap调试。这个，具体的以后文章再进行讨论。更多webpack系列文章，请点击下面的链接：

• https://newsn.net/tag/webpack/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。