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

问题描述 投票：9回答：3

我在编译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任务并观察output（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 style文件夹中，我可以看到已经生成了font-awesome.css。我是gulp和sass编译的新手，所以毫无疑问我在这里误解了一些东西。

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

sass gulp gulp-sass
3个回答
5
投票

我一直有同样的问题（使用带有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'));
});
4
投票

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

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

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

然后我在违规的@import之前添加了换行符。所以在你的情况下，如果它抛出关于top_menu的错误，请换行，这样就变成了：

@import 'custom_bootstrap';    

@import 'top_menu';

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

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

0
投票

我试图重新创建你遇到的问题，但对我来说似乎运行良好。

我将附上我的代码，以及要比较的文件夹结构的镜头。

唯一的遗漏是['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))
});
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.