More than 3 years have passed since last update.

VueやNuxtでpugやstylusを使う設定

Last updated at 2020-02-12Posted at 2020-02-12

僕はpythonが好きで閉じタグを書くのがしんどく感じるのでpugやstylusが好きです。
coffeescriptはtypescriptに負けてて最近使ってませんが・・・
というわけでvueでも使えるようにしたいので毎回している初期の設定をメモしておこうと思います。

loaderの用意

pugやstylusを利用するにはnpmでloaderを用意する必要があります。

$ npm i --save-dev pug pug-plain-loader

$ npm i --save-dev stylus stylus-loader

htmlの部分は<template>に、cssは<style>にlang属性をいれます。

<template lang="pug">
</template>

<style lang="stylus">
</style>

共通の.stylファイルを.vueに書きたくないことや、どのvueファイルからでもmixinを呼び出したいときなどもあるでしょう。
そういった場合、@nuxtjs/style-resourcesを利用します。（nuxtの話）
npmでインストールして、

$ npm i --save-dev @nuxtjs/style-resources

共通で読み込みたい.stylファイルを/assets/stylus/xxx.styl'とすると
nuxt.config.js に以下の記述を追記します。

nuxt.config.js

export default {
  modules: [
    '@nuxtjs/style-resources',
  ],
  styleResources: {
   stylus: './assets/stylus/xxx.styl'
  }
}

複数の.stylファイルを読むこともできますが、メインの.stylを1つ読み込んでそのなかに@importを書いて上げる方法で良いと思います。

nuxt-stylus-resources-loaderを利用して共通の.stylを読み込む方法もありますが、おそらく@nuxtjs/style-resourcesの方が推奨されます。