gulp sass:错误-未找到要导入的文件或文件不可读

我在编译我的SASS文件时遇到了问题，现在我已经将它们分离出来，并导入我在主scss文件中需要的文件

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

main.scss

top_menu.scss

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

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

我的“大口大口大口大口”任务是这样的

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

paths.scss_files变量设置为：

scss_文件：'./src/assets/styles/***.scss'

当任务运行时，我收到一个错误：

要导入的文件找不到或不可读：顶部菜单

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

为什么会出现这个错误

谢谢

编辑：

compile_bower_sass任务编译其他一些scss文件（font-awome、bootstrap、custom_bootstrap），您可以从my main.scss上的@import行看到这些文件是必需的

运行compile_sass任务并查看output（dist）文件夹时，我看到从compile_bower_sass任务生成的css文件（so font-awesome.css、bootstrap.css、custom_bootstrap.min.css）。我注意到top_menu.scss文件也会被复制，但不会被编译，所以我想这就是发生错误的原因

我是否需要在我的任务中指定顺序，以便确保它最后编译main.scs，以确保任何必需的文件（如我的自定义top_menu.scs）首先编译，并且可供我的主文件访问

编辑2

好的，所以我认为我的想法是正确的

如果我更改我的scss_files变量以显式设置它们通过管道传输到gulp sass的顺序（这次我将进一步组织到文件夹中）

现在，我原来的编译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))
});

我现在的结局是

要导入的文件找不到或不可读：字体

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

---

当使用@import语句时，文件是否正在查找命名的scss或css文件？

我已尝试重新创建您遇到的问题，但对我来说，它似乎运行正常

我将附上我的代码和文件夹结构的快照以进行比较

唯一的遗漏是['compile\u bower\u sass']部分，因为我不完全确定您在这里需要什么。这是否可能是应该使用加载路径的内容

您还将从文件夹的屏幕截图中注意到，您的scss文件也将被复制到dist。这可能不可取

这是吞咽代码：

var gulp = require('gulp');
var sass = require('gulp-sass');
var minifycss = require('gulp-minify-css');
var rename = require('gulp-rename');
var gutil = require('gulp-util');

var paths = {
  scss_files: './src/assets/styles/**/*.scss',
  dist: './dist'
};

gulp.task('compile_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))
});

以下是文件夹：

也许你所需要的只是：

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

var paths = {
  scss_files: './src/assets/styles/**/*.scss',
  dist: './dist'
};

gulp.task('compile_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))
});

---

我也遇到过同样的问题（与Sierra一起使用mac），似乎只有在我使用glob风格的Include时才会发生

事实证明，这是由于一个竞赛条件造成的，你可以通过在中放置一个很短的等待来解决它，就像这样

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

---

在

@import

行之间添加换行符

我尝试了许多其他的解决方案，有人建议这是一个与设置

“atomic_save”：true

有关的升华文本问题，但这对我不起作用

我甚至尝试添加一个

.pipe（等待（500））

。也不管用

然后，我在有问题的

@import

之前添加了一个换行符。因此，在您的情况下，如果它抛出一个关于

top\u menu

的错误，请将换行符设置为：

@import 'custom_bootstrap';    

@import 'top_menu';

我不知道为什么，但这是唯一对我有用的东西

---

作为最佳实践，我会在所有行之间添加换行符以防万一。

我在尝试从Gulp 3.9.1迁移到4.0.2时遇到错误，这需要以不同的方式设置gulpfile.js。我在我的文件中尝试了换行，也尝试了等待，以防这是一个比赛条件

利用，它消除了错误，我的sass编译成功了

function compile_sass() {
    return gulp
        .src('./wwwroot/css/**/*.scss')
        .pipe(plumber())
        .pipe(sass())       
        .pipe(gulp.dest("./wwwroot/css"));
}

重要的部分是

---

.pipe（plumber（））

感谢您的评论，我正在使用其他人配置的gulp文件，我想知道此任务是否需要进一步调整。看到我的最新评论，我想任务中发生的事情的顺序需要注意？！在将导入的SCSS文件导入单个文件时，为什么需要先编译这些文件？请参阅编辑以回答可能更好的解决方案。我明白您的意思，请参阅我的最新编辑。我正在运行的这个任务需要先运行另一个任务，它编译main.scss文件中使用的一些bower css文件。最初编写gulp文件的人将sass编译分为两个任务，一个用于bowerlibs，另一个用于我们自己的任务。我现在加载这些bower sass文件时出错了，我可能使这种方式变得比需要的更加困难！如果您的所有SCSS文件都将最终位于main.SCSS文件中，那么为什么还要事先编译它们呢？您找到了解决方案吗？我发现了我遇到的问题：一个文件

SCSS

的前缀是双下划线

（因为我在其他地方使用自动css文件夹全局搜索）出于一个奇怪的原因，以double
\uuuu
开头的文件似乎无法导入。您是否碰巧使用了VS代码？这并不总是一个
竞态条件，我的情况并非如此。对我来说，我只需要添加一个换行符。请参阅上面我的其他评论..pipe（$.wait（200））工作这也解决了我的问题。真奇怪！这似乎是
function compile_sass() {
    return gulp
        .src('./wwwroot/css/**/*.scss')
        .pipe(plumber())
        .pipe(sass())       
        .pipe(gulp.dest("./wwwroot/css"));
}