【エラー解決方法】Error: File to import not found or unreadable:【gulp】

gulpでSassの自動コンパイルをしようとした時にエラーが起きたので、解決方法のメモです。

状況としては、「**.scss」のファイルを保存する時にエラーが出た感じです。

エラー内容は、以下の通り。

[15:50:35] gulp-notify: [Error running Gulp] Error:sass/style.scss
Error: File to import not found or unreadable: mixin/**.
        on line 5 of sass/style.scss
>> @import "mixin/**";


   ^

※エラーは解決したのですが、原因がわかっていません。もしわかる方がいらっしゃいましたら、教えていただけると嬉しいですm(_ _)m

クリックできる目次

エラーの解決方法
エラーの原因がわかりません…
最後に宣伝

エラーの解決方法

問題のsass/style.scssファイルは、以下です。

@import "setting/**";
@import "base/**";
@import "page/**";
@import "mixin/**";
@import "plugins/**";

役割ごとに分けたファイルを、一括で読み込むインポート用のファイルです。

何も問題が無さそう…

結構悩みつつも以下のように修正したら、解決しました。

@import "setting/**";
@import "base/**";
@import "page/**";
@import "mixin/**";
// ここに改行をいれる
@import "plugins/**";

わかりづらいかもしれませんが、エラーが起きてるよ！と指摘された@import "mixin/**";の後ろに改行を入れただけ。

これで上手くgulpが動いてくれました。

[16:02:30] Starting 'sass'...
[16:02:30] Finished 'sass' after 50 ms
[16:02:30] Starting 'bs-reload'...
[16:02:30] Finished 'bs-reload' after 1.09 ms
[Browsersync] Reloading Browsers...

もう１度エラー文を見てみます。

[15:50:35] gulp-notify: [Error running Gulp] Error:sass/style.scss
Error: File to import not found or unreadable: mixin/**.
        on line 5 of sass/style.scss
>> @import "mixin/**";


   ^

読み込みの順番でエラーが起きることはありましたが、たまたま改行を入れたらコンパイルされました。

エラーの原因がわかりません…

解決はしたのですが、なぜこれで解決したのかはわかりません…

もしわかる方がいらっしゃいましたら教えて下さいm(_ _)m

ちなみに、gulpfile.jsはこちらです。

var gulp = require('gulp');
var sass = require('gulp-sass');
var sassGlob = require('gulp-sass-glob');
var plumber = require('gulp-plumber');
var notify = require("gulp-notify");
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssdeclsort = require('css-declaration-sorter');
var mqpacker = require('css-mqpacker');
var browserSync = require('browser-sync');

gulp.task('sass', function() {
return gulp.src('./sass/**/*.scss')
.pipe(plumber({errorHandler: notify.onError("Error:<%= error.message %>")}))
.pipe(sassGlob())
.pipe(sass({outputStyle: 'expanded'}))
.pipe(postcss([mqpacker()]))
.pipe(postcss([cssdeclsort({order: 'alphabetical'})]))
.pipe(postcss([autoprefixer()]))
.pipe(gulp.dest('./css'));
});

//ブラウザ自動更新
gulp.task('browser-sync', function(done) {
browserSync.init({
server: {
baseDir: './',
index: 'index.html'
}
});
done();
});

gulp.task('bs-reload', function (done) {
browserSync.reload();
done();
});

gulp.task( 'watch', function(done) {
gulp.watch('./sass/**/*.scss', gulp.task('sass'));
gulp.watch( './*.html', gulp.task('bs-reload'));
gulp.watch( './css/*.css', gulp.task('bs-reload'));
gulp.watch( './js/*.js', gulp.task('bs-reload'));
done();
});

// default
gulp.task('default', gulp.series(gulp.parallel('browser-sync', 'watch')));

今回は以上です。