Vue.jsならPugとStylusが良い

「vue.js」での「pug」と「stylus」は相性が良いです。

インストール

$ npm install -D pug
$ npm install -D pug-loader
$ npm install -D stylus
$ npm install -D stylus-loader

ファイル準備

/stylus/_reset.styl
/stylus/_variable.styl
/stylus/_mixin.styl
元々あるやつをファイル変換しておく。

Component.vue

コンポーネントの中で使っていく

<template lang="pug"></template>
<style lang="stylus" scoped></style>
<script></script>

外部ファイルは先に読み込んでおく。コンポーネントからの
相対パスで指定する必要があると思います。ここはsassより不便。

<template lang="pug"></template>
<style lang="stylus" scoped>
@import "../../../../scss/_reset.styl"
@import "../../../../scss/_variable.styl"
@import "../../../../scss/_mixin.styl"
</style>
<script></script>

中身を書いていく

実際に中身を書いてみる

<template lang="pug">
.component
  .wrapper
    .container
      .inner
        .item
          .text
            a.link ボタン
</template>
<style lang="stylus" scoped>
@import "../../../../scss/_reset.styl"
@import "../../../../scss/_variable.styl"
@import "../../../../scss/_mixin.styl"
.component
  component()  //mixinを読み込む
  margin 0
  .wrapper
    wrapper()  //mixinを読み込む
    margin 0
    .container
      container()  //mixinを読み込む
      width $default
      .inner
        inner()  //mixinを読み込む
        margin-bottom 0
        .item
          item()  //mixinを読み込む
          display flex
          jusitify-content space-between
          .text
            text()  //mixinを読み込む
            font-size $normal
            a.link
              link()  //mixinを読み込む
              color $link
</style>
<script></script>

どうですか？
_variableと_mixinから呼び出して使って書いても
めっちゃ書きやすくないですか？{:};@include書かなくて良いんです。

以上です。