Yasuaki Uechi
9a9c2343d1
All checks were successful
continuous-integration/drone/push Build is passing
110 lines
3.7 KiB
Markdown
110 lines
3.7 KiB
Markdown
---
|
|
title: "gulp + decomposer: Best way to sassy-@import bower components"
|
|
date: 2015-02-26 09:00:00 +09:00
|
|
redirect_from: "/blog/2015/02/26/gulp-decomposer-bower-import"
|
|
---
|
|
|
|
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)をフォークしてほしい。
|