Chrome 开发工具只显示一个 scss 文件答案

【问题标题】：Chrome dev tools only showing one scss fileChrome 开发工具只显示一个 scss 文件
【发布时间】：2015-06-24 12:43:09
【问题描述】：

我正在运行 gulp 来编译我的 sass 文件。我遇到的问题是我在检查元素时只看到一个 scss 文件。如果您需要更多信息，请告诉我。

我正在运行节点 v0.12.2 我的设置如下：

SCSS 结构

src/scss/main.scss - 导入各种部分

开发依赖

gulp": "^3.8.11",

gulp-sass": "^1.3.3",

gulp-sourcemaps": "^1.5.2"

Gulp 文件

gulp.task('sass', function (){
     gulp.src('src/scss/**/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass())
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('build/css'));
});

gulp.task('default', function(){
    gulp.start('sass');
});

来源地图

{"version":3,"sources":["includes/_buttons.scss","includes/_layout.scss","includes/_reset.scss"],"names":[],"mappings" :"AAAA,AACC,AAAY,AACZ,AAAQ,AACR,AAAO,AACP,AAAQ,AAGT,AACC,AAAY,AACZ,AAAQ,AACR,AAAO,AACP,AAAQ,ACXT,AACC,AAAY,ACDb,AACC,AAAQ, AACR,AAAS","file":"main.css","sourcesContent":[".btn {\r\n\tbackground: #555;\r\n\tborder: 1px solid #999;\r\n \twidth: 100px;\r\n\theight: 50px;\r\n}\r\n\r\n.btn-large {\r\n\tbackground: #555;\r\n\tborder: 1px实心 #999;\r\n\twidth: 200px;\r\n\theight: 100px;\r\n}","body {\r\n\tbackground: #333;\r\n}"," * {\r\n\tmargin: 0;\r\n\tpadding: 0;\r\n}"],"sourceRoot":"/source/"}

【问题讨论】：

标签： css sass google-chrome-devtools gulp gulp-sourcemaps

【解决方案1】：

在升级到 gulp-sass@2.0.0 之前，我遇到了同样的问题。我现在在我的项目中看到不正确的映射，但它解决了这里讨论的单文件问题。请参阅 gulp-sourcemaps 存储库中的 related github issue。

【讨论】：