Nuxt.jsでpugとstylusを使う

前提

• Nuxt.jsでソースをsrcディレクトリにまとめる
  

これをやっていること

インストール

pugとstylusのモジュールをインストール

$ npm i -S pug pug-loader pug-plain-loader stylus stylus-loader@3.0.2 @nuxtjs/style-resources

ファイル作成

ディレクトリ、stylファイルの作成

$ mkdir -p src/assets/style && touch src/assets/style/{_reset.styl,_base.styl,_transition.styl,_keyframe.styl,_media.styl,_variables.styl,index.styl,resource.styl}

設定

設定ファイルに変更を加える

nuxt.config.js

export default {
  css: [
    '~/assets/style/index.styl' // 追記
  ],
  styleResources: {
    stylus: '~/assets/style/resource.styl' // 追記
  },
  modules: [
    '@nuxtjs/style-resources' // 追記
  ]
}

ファイルの内容

_reset.styl

*
  margin 0
  padding 0

_base.styl

img
video
  width 100%
  height auto

_transition.styl

.v-enter-active
.v-leave-active
  transition opacity .5s

.v-enter
.v-leave-to
  opacity 0

_keyframe.styl

@keyframes fade
  0%
    opacity 0
  100%
    opacity 1

_media.styl

$break-point = 768px

/* SP */
sp()
  @media all and (max-width: $break-point - 1)
    block

/* PC */
pc()
  @media all and (min-width: $break-point)
    block

/* IE11 */
ie()
  _:-ms-lang(x)::-ms-backdrop,
  &
    block

/* sp only */
.is-sp
  +pc()
    display none

/* pc only */
.is-pc
  +sp()
    display none

_variables.styl

$main-color = #000000
$primary-color = #ffffff

index.styl

@import '_reset'
@import '_base'
@import '_transition'
@import '_keyframe'

resource.styl

@import '_media'
@import '_variables'

Nuxt.jsのそのほか

• Nuxt.jsを使う