Question

我今天开始使用google web starter kit模板，我想知道我是否可以在调试时观看sass文件。现在我只看到编译过的components.css和main.css。我确实启用了源映射，但显然你只能看到编译版本。

提前许多人

Answer 1

我也有同样的问题。谷歌的以下文章帮助了我： Chrome Dev Tools CSS Preprocessors

具体来说，检查你的gulpfile.js以确保rubySass任务启用了源映射，如下所示：

   gulp.task('styles:scss', function () {
  return gulp.src(['app/styles/**/*.scss', '!app/styles/components/components.scss'])
    .pipe($.rubySass({
      style: 'expanded',
      precision: 10,
      loadPath: ['app/styles'],
      sourcemap: true
    }))
    .pipe($.autoprefixer('last 1 version'))
    .pipe(gulp.dest('.tmp/styles'))
    .pipe($.size({title: 'styles:scss'}));
});

以上原因导致生成css源映射。接下来，我在Chrome开发者工具设置中启用了CSS源地图。最后，我创建了一个Chrome工作区 - 上面的Chrome开发工具文档中提到了这一点。

有关工作区的更多信息，请访问： Chrome Dev Tools Workspaces

在web-starter-kit中使用sass源映射

1 个答案: