111 lines
3.6 KiB
Markdown
111 lines
3.6 KiB
Markdown
|
---
|
||
|
|
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)をフォークしてほしい。
|