普段はgulpを使ってSassのコンパイルをかけていたのですが、その際Sassのコンパイルにgulp-ruby-sassモジュール(ローカルのSassは 3.4.13)を使っていました。

最近SMACSSやFLOCSSなどのCSSの設計手法を勉強していますが、これを実際にSassで実現しようとした際、 複数のファイルをimportする 必要が出ました。

├── foundation/
│   └── _normalize.scss
├── layout/
│   ├── _g-header.scss
│   └── _layout.scss
├── object/
│   ├── component/
│   ├── project/
│   │   ├── _p-g-work.scss
│   │   ├── _p-g-nav.scss
│   │   
│   └── utility/
└── style.scss

例えばlayout/下やobject/project下の複数ファイルをstyle.scssでimportするみたいな感じ。

ファイルを1個1個指定してimportすると、ファイルを作る度にimportの記述を書かなきゃいけないしメンドクサイ。

そこで、ディレクトリ単位でimportできないかと以下の様に指定していました。

@import "layout/*";
@import "object/component/*";

するとこんなエラーが…

file to import not found or unreadable

パスは間違っていないハズなのでどういうことかと思いながら色々調べていたのですが、この記事に出会いました。

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

Sassのバージョンやファイルパスの確認などされていましたが、この人の場合は、拡張子がまずかったようです。

今回の拡張子は.scssのため原因はコレではないようです。

Sass-globbingも1つの手

更に調べていると、sass-globbingというものがあるらしく、これを用いることでディレクトリ単位のコンパイルが可能になるらしいです。

しかし、これはおそらくターミナル上でSassコマンドを叩いてコンパイルをかける場合の話で、gulpに任せてる自分には使えないものなのかなぁと。

解決

そこでgulpで使えるものを探していたのですが、以下の記事を見つけました。

gulp-sass-bulk-importを使ってSassの@importをすっきり管理する。 – Toro_Unit

gulp-sassでのコンパイルにgulp-sass-bulk-importを用いる事でディレクトリ単位でコンパイルかけれるようになるという話。

sassのコンパイル用のモジュールは変わってしまうけど、コンパイルできるなら…！と思いタスクを組むことで出来ました。

var gulp     = require('gulp');
var sass     = require('gulp-sass');
var bulkSass = require('gulp-sass-bulk-import');

gulp.task('sass', function() {
  return  gulp.src('./scss/**/*.scss')
    .pipe(bulkSass())
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./css'))
});

各モジュールのバージョン

• “gulp-sass”: “^2.2.0”,
• “gulp-sass-bulk-import”: “^1.0.1”

困っていた方はこれを試してみてください。

gulp-ruby-sassの方は書き方が特殊なため上手く組み込めませんでした。どうやったら良いんだろ？