gulp.js：在gulp-sass上使用'debug_info'

Question

我試圖將我的SASS文件的行號存入我編譯的CSS文件中。根據docs我必須設置debug_info爲真，但根本不工作。

// Styles 
gulp.task('styles', function() { 
    return gulp.src('src/sass/**/*.scss') 
    .pipe(sass({errLogToConsole: true})) 
    .pipe(sass({ style: 'expanded', debug_info: true })) 
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4')) 
    .pipe(gulp.dest('build/dev/css')) 
    .pipe(minifyCSS()) 
    .pipe(gulp.dest('build/production/css')); 
}); 

任何人都知道這是否可能使用gulp-sass插件？

Answer 1

有可能gulp-sass，我要說的是什麼SteveLacy指出的是您要尋找的解決方案。

在你的代碼，它是這樣的：

// Styles 
gulp.task('styles', function() { 
return gulp.src('src/sass/**/*.scss') 
    .pipe(sass({errLogToConsole: true})) 
    .pipe(sass({ 
     style: 'expanded', 
     sourceComments: 'normal' 
    })) 
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4')) 
    .pipe(gulp.dest('build/dev/css')) 
    //.pipe(minifyCSS()) 
    .pipe(gulp.dest('build/production/css')); 
}); 

注意gulp-minify-css將剝離由gulp-sass添加任何意見，所以我評論了。

Answer 2

gulp-sass使用node-sass，因爲它是SASS編譯器。

參照node-sassDocs，它沒有'debug_info'。 相反它有source comments/maps這可能不是你要去的地方。

有關於行號的懸而未決的問題：https://github.com/andrew/node-sass/issues/196

Answer 3

可以使用gulp-ruby-sass。我在我的項目中使用與調試的相關信息和行號：

var sass = require('gulp-ruby-sass'); 
... 
// Styles for Development (Watch-Process) 
gulp.task('styles-dev', function() { 
    return gulp.src('src/styles/main.scss') 
    .pipe(sass({ 
     debugInfo : true, 
     lineNumbers : true, 
     loadPath : 'src/styles', 
     style  : 'expanded' 
    })) 
    .pipe(gulp.dest('dist/styles')); 
}); 
... 

僑 拉爾夫