--- title: 'gulp + decomposer: Best way to sassy-@import bower components' date: 2015-02-26 00:00:00 Z --- gulp + Browserify(+ debowerify)という構成でWebサイトを作っていると、SASSにもdebowerify相当のものが欲しくなってくる。 ちなみに、__debowerify__ というのは、 ```js var Velocity = require("velocity"); ``` というJavaScriptを、 ```js var Velocity = require("./../../bower_components/velocity/velocity.js"); ``` という風に、bower_components内のパスに解決してくれるBrowserify transformだ。 欲しいのはこれのSASS版。 「あったらいいのにな〜」と思うようなライブラリはGithubで検索すれば必ず出てくる。はずだったが、無かった。 そこで [decomposer](https://www.npmjs.com/package/decomposer) というgulpプラグインを作った。 # 使い方 まずは`npm install --save-dev gulp gulp-sass decomposer`で必要なものをインストールしておく。既存のプロジェクトに追加するならdecomposerだけでいい。 __gulpfile.js__ はこのように定義しておく。 ```js var gulp = require('gulp'); var sass = require('gulp-sass'); var decomposer = require('decomposer'); gulp.task('styles', function() { gulp.src('src/styles/**/*.sass') .pipe(decomposer()) .pipe(sass({indentedSyntax: true})) .pipe(gulp.dest('dist/css')); }); ``` ポイントは`sass` __よりも前__ に`decomposer`を挟むこと。なぜなら、外部から@importしたmix-insや変数はSASSコンパイル時に解決されるからだ。`sass`よりも後に置くと、SASSが@importを解決出来ずにエラーが発生する。 続けてSASSを書こう。 ```scss @import normalize.sass @import styles/font body font-family: $ff-gothic ``` > `$ff-gothic`は [uetchy/styles](https://github.com/uetchy/styles) の _font.sass_ で定義されているfont-familyだ。 最後にBowerを使って必要なアセットをインストールする。 ```bash bower i --save normalize.sass bower i --save uetchy/styles ``` これで完成。後は`gulp styles`を実行するだけだ。 # ファイルパス解決時のポイント decomposer はBowerモジュールに入っている任意のファイルを指定して@importすることが出来る。 記法はこのようになる。 ```scss @import [Bowerモジュール名]/[ファイル名] ``` 例えば、よく使うスタイルをまとめた [uetchy/styles](https://github.com/uetchy/styles) の___font.sass__ を@importするなら、 ```scss @import styles/font ``` と書ける。 ここでもし`@import styles`と、ファイル名を省略して書くとどうなるのだろうか? コンパイルに失敗する? そんなことはない。 モジュール名だけを書くと、decomposerは__bower.json__に書かれているmainファイルを見つけ出して、それを@importしてくれるのだ。 もしmainファイルが複数指定されていたら、`index.sass`や`[モジュール名].sass`、または__mainっぽい名前__ を持つファイルを@importする。 つまり、 ```scss @import normalize.sass ``` と書けば、 ```scss @import ../bower_components/normalize.sass/normalize.sass ``` という風に解決される。 # まとめ これでスタイルの@importをすっきり書けるようになった。 とはいえ、component対応やPlain CSSのインライン展開や.less対応など、追加したい機能は色々ある。 もしContributionに興味があるなら、[Githubリポジトリ](https://github.com/uetchy/decomposer)をフォークしてほしい。