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

Posted 2023-02-16

【中文标题】gulp-sass：错误 - 找不到要导入的文件或不可读

【英文标题】：gulp-sass: ERROR - file to import not found or unreadable

【发布时间】：2015-09-15 17:04:44

【问题描述】：

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

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

main.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))
);

paths.scss_files 变量设置为：

scss_files: './src/assets/styles/**/*.scss'

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

找不到或无法读取要导入的文件：top_menu

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

为什么会出现这个错误？

谢谢

编辑：

compile_bower_sass 任务编译其他一些 scss 文件（font-awesome、bootstrap、custom_bootstrap），您可以从我的 main.scss 上的 @import 行中看到这些文件。

当运行 compile_sass 任务并观察输出 (dist) 文件夹时，我看到 css 文件是从 compile_bower_sass 任务生成的（如 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))
);

我现在结束了

找不到或无法读取要导入的文件：font-awesome

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

当使用@import 语句时，文件是在寻找那个名为 scss 还是 css 文件？

【问题讨论】：

我发现了我遇到的问题：一个文件 scss 以双下划线 __ 为前缀（因为我在其他地方使用自动 css 文件夹通配）并且出于奇怪的原因文件以双 @ 开头987654328@ 似乎无法导入。

你在使用 VS Code 吗？

【参考方案1】：

我在尝试从 Gulp 3.9.1 迁移到 4.0.2 时遇到错误，这需要以不同的方式设置 gulpfile.js。我在我的文件中尝试了 换行符 以及 wait 以防它是一个竞争条件。

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

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

重要的部分是

.pipe(水管工())

【参考方案2】：

在@import 行之间添加换行符。

我尝试了许多其他解决方案，有些人认为这是与设置 "atomic_save": true 有关的 SublimeText 问题，这对我不起作用。

我什至尝试添加.pipe(wait(500))。也没用。

然后我只是在有问题的@import 之前添加了一个换行符。因此，在您的情况下，如果它抛出有关 top_menu 的错误，请放置一个换行符，使其变为：

@import 'custom_bootstrap';    

@import 'top_menu';

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

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

【讨论】：

这也解决了我的问题。多么奇怪！

这似乎解决了我的问题，但后来又出现了。

我的再也没有回来。

【参考方案3】：

我遇到了同样的问题（使用带有 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'));
);

【讨论】：

它并不总是race condition，在我的情况下也不是。对我来说，我只需要添加一个换行符。请参阅上面的其他评论。

.pipe($.wait(200)) 工作

【参考方案4】：

我已尝试重现您遇到的问题，但对我来说似乎运行良好。

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

唯一的遗漏是 ['compile_bower_sass'] 部分，因为我不完全确定您在这里需要什么。是否有可能应该使用 loadPath 来代替？

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

这是 Gulp 代码：

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

文件夹如下： http://take.ms/AOFND

也许你只需要：

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

【讨论】：

感谢 cmets，我正在使用其他人配置的 gulp 文件，我想知道这项任务是否需要进一步调整。看我最新的cmets，我在想任务中发生的顺序需要注意吗？！

为什么导入的SCSS文件在导入单个文件时需要先编译？请参阅编辑以回答可能的更好解决方案。

我明白你在说什么，看看我的最新编辑。我正在运行的这个任务需要先运行另一个任务，它编译我的 main.scss 文件中使用的一些 bower css 文件。最初编写 gulp 文件的人已将我们的 sass 编译分成两个任务，一个用于 bower 库，一个用于我们自己的。我现在加载这些 bower sass 文件时出错，我可能让这种方式比它需要的更困难！

如果你所有的 SCSS 文件都在你的 main.scss 文件中，那为什么还要事先编译它们呢？

你找到解决办法了吗？