sass - gulp-sass: 错误 - 要导入的文件未找到或无法读取

Question

我在编译 SASS 文件时遇到问题，现在将它们拆分并导入我在主 scss 文件中需要的文件。

我有一个样式文件夹，其中包含:

主文件

top_menu.scss

我在 main.scss 中添加了一些导入:

@import 'font-awesome';
@import 'bootstrap';
@import 'custom_bootstrap';    
@import 'top_menu';

我的 gulp-sass 任务看起来像这样

gulp.task('compile_sass', ['compile_bower_sass'], function () {
  return gulp.src(paths.scss_files, {base:'src'})
    .pipe(gulp.dest(paths.dist))
    .on('error', gutil.log)
    .pipe(sass().on('error', sass.logError))
    .pipe(minifycss({
      keepSpecialComments: false,
      removeEmpty: true
    }))
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest(paths.dist))
});

path.scss_files 变量设置为:
scss_files: './src/assets/styles/**/*.scss'
当任务运行时，我收到一个错误:

file to import not found or unreadable: top_menu

我实际上希望能够将我的 scss 拆分为单独的相关子文件夹，然后使用 @import: 'navigation\top_menu' 有点东西。

为什么会出现这个错误？

谢谢

编辑:

compile_bower_sass 任务编译了一些其他的 scss 文件(font-awesome、bootstrap、custom_bootstrap)，正如您从我的 main.scss 上的 @import 行中看到的那样。

在运行 compile_sass 任务并查看输出 (dist) 文件夹时，我看到 compile_bower_sass 任务生成了 css 文件(所以 font-awesome.css、bootstrap.css、custom_bootstrap.min.css)。我注意到 top_menu.scss 文件也被复制了，但没有被编译，所以我想这就是发生错误的原因。

我是否需要在我的任务中指定一个顺序，所以我可以确保它最后编译 main.scss 以确保任何必需的文件(例如我的自定义 top_menu.scss)首先被编译并且可供我的主文件访问？

编辑 2

好的，所以我认为我的想法归结为编译顺序是正确的。

如果我更改我的 scss_files 变量以明确设置它们通过管道传输到 gulp-sass 的顺序(这次我进一步组织到文件夹中)

scss_files:          ['./src/assets/styles/custom_bootstrap.scss',
                        './src/assets/styles/navigation/top_menu.scss',
                        './src/assets/styles/navigation/user_toolbar.scss',
                        './src/assets/styles/main.scss']

现在我原来的 compile-sass 任务按原样工作。

所以，我的下一个问题是如何配置 gulp-sass 以确保我的 main.scss 文件最后编译？或者我是否以错误的方式解决这个问题？

编辑 3:

当我第一次问这个问题时，我可能应该添加这些额外的任务配置。所以 compile_sass 任务需要首先运行 compile_bower_sass。

    /*-BOWER PACKAGEs INCLUSION --------------------------------------------*/
    gulp.task('compile_bower_sass', ['compile_bower_css'], function(){
      var sassFiles = mainBowerFiles('**/*.scss');
      return gulp.src(sassFiles)
        .pipe(rename(function(path){
          path.basename = path.basename.replace(/^_/, '');
          return path;
          // required where the string begins with _ , meaning that sass won't compile it (bootstrap)
        }))
        .pipe(sass({onError: function(e) { console.log(e); } }))
        .pipe(gulp.dest(paths.dist_styles));
    });

    gulp.task('compile_bower_css', function(){
      var cssFiles = mainBowerFiles('**/*.css');
      return gulp.src(cssFiles)
        .pipe(gulp.dest(paths.dist_styles));
    });

gulp.task('compile_sass', ['compile_bower_sass'], function () {
  return gulp.src(paths.scss_files, {base:'src'})
  .pipe(sass({outputStyle: 'compressed'})
      .on('error',   sass.logError))
  .pipe(rename({suffix: '.min'}))
  .pipe(gulp.dest(paths.dist))
});

我现在结束了

file to import not found or unreadable: font-awesome

在我的 dist 样式文件夹中，我可以看到 font-awesome.css 已生成。我对 gulp 和 sass 编译很陌生，所以毫无疑问我在这里误解了一些东西。

使用@import 语句时，该文件是在寻找该命名的 scss 文件还是 css 文件？

Answer 1

我一直有同样的问题(使用带有 Sierra 的 mac)并且它似乎只在我使用包含的 glob 样式时发生。

事实证明这是由于 竞争条件 ，您可以通过 解决它稍等片刻 像这样...

var gulp = require('gulp');
var sass = require('gulp-sass');
var wait = require('gulp-wait');

gulp.task('scss', function () {
    gulp.src('resources/scss/**/*.scss')
        .pipe(wait(200))
        .pipe(sass())
        .pipe(gulp.dest('public/dist'));
});