VueifyでStylusのimportをやる方法

Vueifyとは

Vueify

Vueifyはこちらの記事を参考にするとわかりやすいので導入についての説明は省きます。
簡単にVueifyを説明すると、Vue.jsでComponent毎にHtml/Css/Javascript(Vueオブジェクト)をBrowserifyで管理できるものです。

Html/Css/Javascriptはそれぞれ、Template Engine/MetaCSS/AltJsを指定することで利用できます。

例えば…

ほげと表示されるhoge.vueというコンポーネントを作りたい場合。

構成

• Html
  • Jade
• Css
  • Stylus
• Javascript
  • CoffeeScript

サンプルのhoge.vueファイル

vue

<style lang="stylus">
.hoge
	color #cc3366
</style>

<template lang="jade">
.hoge
	p {{hoge}}
</template>

<script lang="coffee">
module.exports =
  data: ->
    hoge: "ほげ"
</script>

ところで、MetaCSSといえば@importなどで外部ファイルをimportでき、StylusやSassだと@extendでスタイルの継承ができます。

コンポーネントの外部に自前のmixinやextendを使用したいケースはよくあると思います。
しかし、Vueifyのようにコンポーネント毎にファイル化してしまうと使えるのか心配になりますし、そもそもドキュメントにもどこにもこの辺りは明記されていないので試してみました。

gulpを使用する場合

ディレクトリ構成

※サンプルなのでお好みの構成で

• /bower_components
• /node_modules
• package.json
• bower.json
• gulpfile.coffee
• /src
  • /javascripts
    • app.js
    • /vue
      • hoge.vue
  • /stylus
    • /extends
      • border.styl
  • /jade
    • index.jade

border.styl

stylus

.border
	border 1px solid #cc3366

hoge.vue

vue

<style lang="stylus">
@import './src/stylus/extends/border'
.hoge
	@extend .border
	color #cc3366
</style>

<template lang="jade">
.hoge
	p {{hoge}}
</template>

<script lang="coffee">
module.exports =
  data: ->
    hoge: "ほげ"
</script>

まぁ書いてしまえばなんということはないですが、注意したいのは以下のファイルの参照の仕方です。

.vueファイルからの相対ではなく、
gulpfileからの相対で記述

ここに注意しないと、border.stylがないと怒られます。しかしこの参照についてドキュメント類がみつからなかったので一瞬迷いました。

所感

VueifyはVue.js使いにはかなり使えそうなものだと思います。React.jsもReact-Jadeがありますが、.jsxファイルのrender()を直接見に行くという点では、Html/Cssしか書けないフロントエンドエンジニアには厳しいし、デザイナーにしてみたら多分見たくもないでしょう。
しかし、コンポーネントが明示的にファイル化されていて、Styleもそこにあるとなれば運用・管理はしやすいのではないかと思いました。

追記

Jadeのincludeがうまくいかないワナにハマっています。VueのComponentにすればよいのですが… 汎用的なJadeは外においておきたいのに…。どなたかッ!!