Gulp Postcss 中如何使用 scss 为后缀名的源文件？

Question

使用 gulp + gulp-postcss 进行 css 代码预编译，需求如下：

1.源文件为 .scss；
2.编译为 .css + .map；
3.期间会用到 precss 插件，以支持 sass 语法

gulpfile 代码如下：

/* 前面插件调用的语句略过 */
gulp.task('postcss', function () {
  var processors = [
    csswring,
    precss,
    autoprefixer({
      browsers:['last 2 version']
    })
  ];
  return gulp.src('./src/scss/index.scss')
  .pipe($.postcss(processors))
  .pipe($.sourcemaps.init({loadMaps: true}))
    .on('error', $.util.log)
  .pipe($.sourcemaps.write('.', {
    includeContent: false,
    sourceRoot: '../src/scss'
  }))
  .pipe(gulp.dest('dist/css'));
});

出现如下问题：

1.源文件为 scss 后缀名时，编译出来的文件也是 scss 后缀名；
2.使用 gulp-rename 对输出文件进行改名的话，sourcemaps 输出不正确。