webpack中,目前来说,设置jssourcemap比较容易,但是设置csssourcemap就困难多了。因为css的表现形式很多,有cssscsslessscssless作为特殊的css,是需要特殊处理的。

苏南大叔:webpack4系列教程,如何设置css的sourcemap? - webpack-css-sourcemap
webpack4系列教程,如何设置css的sourcemap?(图6-1)

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

基本设置

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

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

苏南大叔:webpack4系列教程,如何设置css的sourcemap? - css-sourcemap
webpack4系列教程,如何设置css的sourcemap?(图6-2)

下面的例子,是个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,
            }
        }
    ]
},

苏南大叔:webpack4系列教程,如何设置css的sourcemap? - webpack-css-sourcemap-config
webpack4系列教程,如何设置css的sourcemap?(图6-3)

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

devtool: 'inline-source-map',

相关链接:

苏南大叔:webpack4系列教程,如何设置css的sourcemap? - webpack-css-sourcemap-config-2
webpack4系列教程,如何设置css的sourcemap?(图6-4)

整体的效果就是:

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: [
                   //...
                ]
            },
            //...
        ]
    },
}

浏览器调试效果

效果还不错,csssourcemap调试效果如下:

苏南大叔:webpack4系列教程,如何设置css的sourcemap? - css-sourcemap-f12
webpack4系列教程,如何设置css的sourcemap?(图6-5)

苏南大叔:webpack4系列教程,如何设置css的sourcemap? - css-sourcemap-f12-2
webpack4系列教程,如何设置css的sourcemap?(图6-6)

相关链接

总结

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

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   webpack    sourcemap

本站的忠实读者小伙伴,正在阅读下面这些文章: