Nuxt.js + TypeScript + Sass でプロジェクトをスタートする

はじめに

新規でNuxt.js + TypeScript + Sassで開発をするときの覚書です。

Nuxt.js + TypeScript のインストール

任意の場所で下記を実行します。

$ vue init nuxt-community/typescript-template my-project
$ cd my-project
$ npm install

Sass のインストール

my-project のディレクトリで下記を実行します。

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

nuxt.config.jsを修正します。

nuxt.config.js

css: [
  '~/assets/css/main.css',
],

↓

nuxt.config.js

css: [
  '~/assets/css/main.scss',
],

main.cssのファイル名も修正します。

$ cd assets/css/
$ mv main.css main.scss

以上！