6
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

Organization

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

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

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??

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

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

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

    ├── _aaa.css.scss
    └── _bbb.css.scss

    ├── _aaa.scss
    └── _bbb.scss

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
6
Help us understand the problem. What are the problem?