【Nuxt.js】共通stylusを使用できる方法

Nuxt.jsでcssを書くときにデフォルトではSassを使うことが多いと思いますが、
もう一歩踏み込んでStylusでやってみたいと思いました。

Stylusとは？

ざっくりStylusの特徴といえば、{}や「 : 」,「 ; 」を使わずにかけることです。
Sassの後発でもあるのでSassの書き方も使えるみたいです。(どこまでかは今お試し中です。)
ソースをコピペするときはそのまま使えたりするので便利ですよね。

Stylusを使えるようにする

ますは必要なモジュールを入れます。

$ yarn add stylus stylus-loader  

vueファイルのstyleタグにlang設定します。

<style lang="stylus">  
.section
  color red
  font-size 1.6rem  
  border 1px solid #000000
  .innner-section
    padding 2em
</style>  

サイトで共通の変数やclassを使いたい

vueファイル内であれば下記のような書き方で変数を使えます。

<style lang="stylus">  
$red #ff0000
.section
  color $red
  font-size 1.6rem  
  border 1px solid $red
</style>  

しかし、別のvueファイルでの変数は使えません。
共通用のファイルを作成する必要があります。

assets
 -variables.scss

このままだSassのままなので下記のコマンドを叩き、追加してください。

$yarn add @nuxtjs/style-resources

さらに下記にファイル構成を変更（こんな感じのほうがまとまりがいいと思います。）

assets
 -stylus
  -_variables.styl 

先ほど作成したファイルに変数などをまとめます。

assets/stylus/_variables.styl

$white = #ffffff  
$black = #000000
$display01 = 600px

nuxt.config.jsの設定を行います。

nuxt.config.js

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

これで各vueファイルに変数の使用や共通styleを使うことができます。