フロントまわりのエコシステムを諸々整備しているところなのですが、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をもってきたのでこんなことになってしまった・・・