BETA

【Nuxt.js】pugやらstylusやらで書けるようにする

投稿日:2019-10-02
最終更新:2019-10-02

自分の開発環境がpug/stylusで組むことが多いので、Nuxt.jsでもできないかなーって調べていたら、できますた!

※nuxt.js v2.6.2で動作確認してます。
※yarn利用です。

pug使えるようにしたい!

コマンド打って、必要なモジュールを入れる。

$ yarn add pug pug-loader pug-plain-loader  

あとはvueファイルのtenplateタグにlang設定すればおk。

<template lang="pug">  
article  
    section.sectionBlock  
        .sectionBlock__inner  
            h1.c-heading--primary H1見出しだよー  
            p テキストが入るよ。テキストなんだよー。  
</template>  

stylus使えるようにしたい!

pug同様、必要なモジュールを入れて…

$ yarn add stylus stylus-loader  

vueファイルのstyleタグにlang設定すればおk。

<style lang="stylus">  
.sectionBlock  
    background-color #fff  
    font-size 1.6rem  
    line-height 1.8  
.c-heading--primary  
    font-size 2.4rem  
    font-weight bold  
    line-height 1.5  
</style>  

サイト共通の変数使いたい

stylusにしちゃえば、下記みたいな感じで変数使えるけど、

<style lang="stylus">  
$white = #ffffff  
.sectionBlock  
    background-color $white  
</style>  

別のvueファイルから$whiteを呼び出すことはできない。。。
でも、サイト共通で使いたい変数ってあるし…(゜゜)

そんなときは、下記コマンドを叩く!

$yarn add @nuxtjs/style-resources  

変数をまとめたファイルを用意して…

// assets/stylus/_variables.styl  
$white = #ffffff  
$black = #000000  
...  

nuxt.config.jsで設定してあげる。

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

参考にさせていただきました!ありがとうございます!!

『nuxt.js(v2)でpug/stylusを利用する』amishiro様

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

自分の備忘録として殴り書く!!

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう