Question

我正在尝试将我的SASS文件的行号放入已编译的CSS文件中。根据{{3}}，我必须将debug_info设置为true，但根本不起作用。

// 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-sass Docs，它没有＆＃39; debug_info＆＃39;。相反它有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'));
});
...

侨拉尔夫

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

3 个答案: