使用Chrome sourcemap在线调试Webpack中的SASS/SCSS代码

最新推荐文章于 2025-09-30 15:30:01 发布

原创最新推荐文章于 2025-09-30 15:30:01 发布 · 739 阅读

0 ·

CC 4.0 BY-SA版权

现代前端技术专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了如何在Webpack中配置css-loader和sass-loader以支持SCSS文件的加载和编译，包括设置sourceMap以方便调试，以及使用ExtractTextPlugin提取CSS。

需要安装css-loader和sass-loader

配置文件

{
    //仅仅对require的scss文件有效
    test : /\.scss$/,
        use  : ExtractTextPlugin.extract({
            fallback : "style-loader",
            use      : ['css-loader?sourceMap', //加入sourceMap
                        {
                            loader  : "sass-loader",
                            options : {
                                includePaths      : ["./app"],
                                outputStyle       : 'compressed',
                                sourceMap         : true,
                                sourceMapContents : true
                            }
                        }
                       ]
        })
},