Posted at

`gulp-sass`で`file to import not found or unreadable`のエラー

More than 3 years have passed since last update.

フロントまわりのエコシステムを諸々整備しているところなのですが、CSSのコンパイルにgulp-sassを使ったところ、少しハマってしまったのでメモしておきます


gulp-sass

https://github.com/dlmanning/gulp-sass

インストール、基本的な使い方については上のページに載っているのでここでは割愛します


前提として@importしている

Sassを全然詳しくないのですが、以下のような構成にして、

tree ./stylesheets/

./stylesheets/
├── application.css.scss
└── some
   ├── _aaa.css.scss
   └── _bbb.css.scss

で、application.css.scss内で、


application.css.scss

@import "some/aaa";

@import "some/bbb";

それぞれのスタイルのモジュールをimportしてあげるというのはよくある方法だと認識しています。

いずれにせよこのような感じのファイルをデザイナーからもらったので、これらをgulp-sassでコンパイルすると・・・


file to import not found or unreadableが出る

以下のようなエラーが出た > <

gulp sass

[20:08:38] Using gulpfile ~/some-project/gulpfile.js
[20:08:38] Starting 'sass'...
[20:08:38] Finished 'sass' after 11 ms
Error in plugin 'sass'
Message:
stylesheets/application.css.scss
12:9 file to import not found or unreadable: some/aaa
Current dir:

some/aaaこんなもんみつからないよ、ということだけど・・・。


それっぽいissueをみつける

https://github.com/dlmanning/gulp-sass/issues/1

https://github.com/dlmanning/gulp-sass/issues/235

比較的古いissueだったけどコメントみるとかなり盛り上がっていた模様。ただしこれら全部試してみたけど、どれもエラーは解消されなかった・・・以下載っていた対応策


gulp-sassのバージョンを2.Xにあげる

もとから2.0.4だった


includePathsを正しく設定する

gulpの処理内でincludePathsを設定してみたが、こちらでも解消されず・・・

gulp.src('./styles/main.scss')

.pipe(sass({includePaths: ['./styles']}))
.pipe(gulp.dest('./styles'))


Sublime?? Windows??

https://github.com/dlmanning/gulp-sass/issues/235#issuecomment-99998298

らへんみていただければなのですが、WindowsユーザでかつSublime Textを使っているユーザがatomic_saveまわりの設定を変更することでエラー解消された!という報告がたくさんあがっていました。

が、、、自分は該当ではない・・・。


.css.scssが原因だったぽい

手探りでいろいろやってようやくエラー解消できました。

    ├── _aaa.css.scss

   └── _bbb.css.scss

    ├── _aaa.scss

   └── _bbb.scss

に修正したら動きました。.css.scssという拡張子の書き方がよくなかったぽいですね。

Railsで自動でジェネレートされるファイルがこういった拡張子になると思うのですが、Railsで一旦つくったプロジェクトからCSSをもってきたのでこんなことになってしまった・・・