Question

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

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

SCSS结构

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

Dev Dependecies

gulp＆＃34;：＆＃34; ^ 3.8.11＆＃34;，

gulp-sass＆＃34;：＆＃34; ^ 1.3.3＆＃34;，

gulp-sourcemaps＆＃34;：＆＃34; ^ 1.5.2＆＃34;

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');
});

来源地图

{＆＃34;版本＆＃34;：3，＆＃34;来源＆＃34;：[＆＃34;包括/ _buttons.scss＆＃34;＆＃34;包括/ _layout.scss＆＃34; ＆＃34;包括/ _reset.scss＆＃34]，＆＃34;名称＆＃34;：[]，＆＃34;映射＆＃34;：＆＃34; 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＆＃34;＆＃34;文件＆＃34;：＆＃34; main.css＆＃34;，＆＃34; sourcesContent＆＃34;：[＆＃34; .btn {\ r \ n \ t \ t \ background：＃555; \ r \ n \ n \ tborbor：1px实心＃999; \ r \ n \ twidth：100px; \ r \ n \ theight：50px; \ r \ n} \ r \ n \ r \ n \ n.btn-large {\ r \ n \ n \ t \ tbackground：＃555; \ r \ n \ tborder：1px solid＃999; \ r \ n \ twidth：200px; \ r \ n \ theight：100px; \ r \ n}＆＃34;，＆＃34; body {\ r \ n \ tbackground：＃333; \ r \ n}＆＃34;，＆＃34; * {\ r \ n \ tmargin：0; \ r \ n \ tpadding：0; \ r \ n}＆＃34;] ＆＃34; sourceRoot＆＃34;：＆＃34; /源极/＆＃34;}

Answer 1

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

Chrome开发工具仅显示一个scss文件

1 个答案: