【问题标题】:Gulp sass is eating the scss file without giving any errorsGulp sass 正在吃 scss 文件而没有给出任何错误
【发布时间】:2020-05-12 15:46:31
【问题描述】:

我几天前开始使用 gulp,我必须解决许多问题,在非编译语言中修复错误非常困难,而且它们的运行时间也很慢。

不幸的是,我发现的最后一个问题非常不同,它没有给出任何错误,只是从流中吃掉了文件。

这里用更少的词来总结问题是gulpfile.js的部分:

gulp.src([ folder.src + "scss/vendor/_bootstrap.scss" ], { allowEmpty: true })
    .pipe(debug())                          // file exists
    .pipe(sourcemaps.init())
    .pipe(debug())                          // file exists
    .pipe(sass().on('error', sass.logError)) // scss to css
    .pipe(debug())                          // file doesn't exist
    .pipe(autoprefixer({
        overrideBrowserslist: ["last 2 versions"]
    }))
    .pipe(debug())
    .pipe(cleanCSS()) // minifies css
    .pipe(rename({
        // rename bootstrap.css to bootstrap.min.css
        suffix: ".min"
    }))
    .pipe(sourcemaps.write("./")) // source maps for bootstrap.min.css
    .pipe(gulp.dest(out));

前两个调试语句输出 gulp 管道流中有一个文件,而在管道上运行 sass() 后文件立即消失,没有通知或错误。

[20:21:45] Starting 'css'...
[20:21:45] gulp-debug: src/main/resources/assets/scss/vendor/_bootstrap.scss
[20:21:45] gulp-debug: src/main/resources/assets/scss/vendor/_bootstrap.scss
[20:21:45] gulp-debug: 1 item
[20:21:45] gulp-debug: 1 item
[20:21:45] gulp-debug: 0 items
[20:21:45] gulp-debug: 0 items
[20:21:45] Finished 'css' after 169 ms

是不是很奇怪?我将如何解决这个问题。没有堆栈跟踪,没有错误,没有警告:(

【问题讨论】:

    标签: javascript css sass gulp gulp-sass


    【解决方案1】:

    实际上,sass 函数会忽略以下划线 (_) 为前缀的文件。可能是因为它们代表 sass 的部分。

    通过重命名管道流并使用简单的正则表达式可以解决问题:

    gulp.src([ folder.src + "scss/vendor/_bootstrap.scss" ], { allowEmpty: true })
    // ...
    .pipe(rename(function(opt) {
        opt.basename = opt.basename.replace(/^_/, '');  // renames files starting with _
        return opt;
    }))
    .pipe(sass())
    // ...
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2023-03-17
      • 1970-01-01
      • 2019-05-18
      • 2021-03-04
      相关资源
      最近更新 更多