【2019年5月】 Nuxt.jsインストールとカスタマイズ。（webサイト構築用）

最近Nuxt.jsを使ってサイト制作をちょこちょこやってます。なかなか楽しい。
自分なりの環境構築の手順と、追加の設定をまとめておきます。

開発環境

MacOS 10.14.4
Node.js v12.2.0

任意のディリクトリで下記コマンドを実行する。

npm init nuxt-app <project-name>

コンパイラとローダーを追加する。

npm install --save-dev node-sass sass-loader

サイト全体で効かせたい共通デフォルトのcssはfoundation.scssに書きたい。
foundation.scssを作成し、nuxt.config.jsに以下のように追記

export default {
  css: [
    '@/assets/scss/foundation.scss'// プロジェクト内のSCSSファイル
  ]
}

リセットCSSにressを採用。下記コマンドでインストール。

npm install --save ress

nuxt.config.jsに以下のように追記。

export default {
  css: [
    'ress',// Node.js モジュールをロードする
  ]
}

style-resources-moduleプラグインを使って実現する。
下記コマンドでインストール。

yarn add @nuxtjs/style-resources

variables.scss、mixin.scssを作成し、nuxt.config.jsに以下のように追記

modules: ['@nuxtjs/style-resources'],
styleResources: {
  scss: [
    '@/assets/scss/variables.scss',
    '@/assets/scss/mixin.scss'
  ]
}

npm run dev

上記コマンドを実行しブラウザでhttp://localhost:3000にアクセスする。
ファイル監視、ホットリロードも動作する。

下記コマンドで静的なファイルが生成できる。

npm run generate

<style scooped>