Nuxt.js + Pug + Stylus の開発環境構築メモ

npm パッケージ一覧

Nuxt.js アプリケーション

npm init nuxt-app <project-name>

pug インストール

npm i pug pug-loader pug-plain-loader

stylus インストール

npm i stylus stylus-loader

stylus の変数・mixinなどを共通で使えるようにするパッケージ

npm i @nuxtjs/style-resources

nuxt.config.js

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    '@nuxtjs/style-resources' // ①
  ],

  styleResources: {
    stylus: [
      '~/assets/styles/variables.styl' // ②
    ]
  },

google fontsを読み込むためのパッケージ

npm i nuxt-webfontloader

nuxt.config.js

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    'nuxt-webfontloader'
  ],
  webfontloader: {
    google: {
      families: [{{フォント名}}]
    }
  },

参考記事