Question

sass中的sourcemaps是干什么用的

Answer 1

首先，从名字可以看出sourcemaps是生成文件到源文件的一个映射，也就是sourcemaps记录了生成文件中的每一条语句在源文件中的对应位置。以gulp编译sass为例（假设你对gulp已经有了一定了解）：
1. 先安装gulp-sourcemaps，命令为：npm install --save-dev gulp-sourcemaps
2. 在gulpfile.js中引用它：sourcemap = require( 'gulp-sourcemaps' )
3. 建立一个任务
gulp.task( 'sass', function() {
return gulp.src( ['./src/css/index.scss'] ) //后缀为scss
.pipe( sourcemap.init() ) //初始化
.pipe( sass({outputStyle: 'compressed'}) )
.pipe( sourcemap.write( './maps' ) ) //生成sourcemap文件，路径为./maps
.pipe( gulp.dest( './des/dist/' ) )
} );
这样在命令行中运行该任务：gulp sass，就可以生成sourcemaps文件了

在html中引入生成的css文件，谷歌浏览器打开该html文件，我们就能够看到下图。
标红的部分可以看到对应的样式文件是scss，点击进入就能够找到这个样式对应在scss文件中的位置了。
调试起来就方便啦！