フロントまわりのエコシステムを諸々整備しているところなのですが、CSSのコンパイルにgulp-sassを使ったところ、少しハマってしまったのでメモしておきます
gulp-sass
インストール、基本的な使い方については上のページに載っているのでここでは割愛します
前提として@importしている
Sassを全然詳しくないのですが、以下のような構成にして、
tree ./stylesheets/
./stylesheets/
├── application.css.scss
└── some
├── _aaa.css.scss
└── _bbb.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をもってきたのでこんなことになってしまった・・・