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

使用chrome sourcemap 在线编辑代码的开发体验非常畅快， 最简单的souorcemap是在线调试原始的css代码， 只需要将项目文件夹添加到chrome中，然后就可以直接在chrome中以所见即所得的方式编辑css了。简单的soucemap调试可以看下这篇文章Chrome 浏览器的 source-map 功能

但是随着前端开发环境的日趋复杂， 大部分开发环境不会这么纯粹，而是经过了很多工程工具的处理， 比如现在很流行的webpack，它里面集成了很多处理工具， 单一个样式文件就可能经过了好几个loader的处理，然后再打包编译，与原始代码相去甚远。 本文将讨论使用scss开发样式的时候如何使用chrome的sourcemap功能提升开发效率。

首先理想的状态应该是直接在chrome devtools里在线编辑样式， 就跟调试原始css一样。如果不使用webpack， 只是单纯用scss的话， 只需要下载sass然后在CLI里监听你的scss文件就可以了。如图在线编辑scss样式：

如何监听scss文件得到如图效果可以看这篇博客：Sass Source Maps + Chrome = Magic

但是如果使用webpack的话，我暂时没有找到可以不刷新即时反应更改效果的方式（知道的同学还请留言科普）
目前我所用的方式是依靠wepack的自动刷新来即时预览调试效果。

chrome里的配置很简单，先将自己本地项目文件添加到chrome的workspace里就可以了（在source面板空白处右键Add Folder,同时设置里也要注意开启sourcemap功能）也是和普通的sourcemap一样， 只是使用webpack 的sourcemap时webpack会将源文件放在webpack://文件夹下， 在chrome devtools的source面板中就可以看到，如下图：

使用webpack中的sourcemap调试scss有几个地方需要注意：

• webpack的配置文件中css和scss的loader都要开启sourcemap， 而sass-loader的配置还需要加几个参数，以下是我的css-loader和scss-loader的配置参数：

,{
            test: /\.css$/,
            loader:   ExtractTextPlugin.extract("style-loader", "css-loader?sourceMap!autoprefixer-loader")

        },
            {
            test: /\.scss$/,
            loader: ExtractTextPlugin.extract("style-loader", "css-loader?sourceMap!sass-loader?&outputStyle=expanded&sourceMap=true&sourceMapContents=true!autoprefixer-loader")
        },

这些参数都是node-sass的配置选项， 可参考这两篇官方文档：sass-loader 和 node-sass
另外sass-loader的issue里也提到了如何配置webpack中的参数以使得在chrome devtools调试sass：
[Question] source-maps with css or sass?

该issue中如下图的回答：

关于webpack中sourcemap配置模式的区别（也就是devtool里参数）可以看我之前写的博客：
打破砂锅问到底：详解Webpack中的sourcemap