CSS 書くなら CSS プリプロセッサを使ったほうが書くのが楽になります．

階層構造がわかりやすいので見やすいですし，変数化すれば複数箇所の記述を変更する手間と見落としをなくすことができるからです．

Nuxt.js はパッケージインストールだけで簡単に Sass (SCSS/SASS) を導入できます．

CSS プリプロセッサの導入

基本的には，公式ドキュメント通りに進めれば OK です．

# -D = --save-dev
$ npm i -D node-sass sass-loader

ただ，フレームワークに Vuetify (@nuxtjs/vuetify: 1.11.2) を導入しているところに実行したら，ビルド中にエラーが出ました．

この場合は sass-loader のバージョンを下げることで対応できるようです．

Vuetify と sass-loader のバージョン依存関係

package-lock.json によれば，依存関係は以下のようになっていました．

{
  ...
  "@nuxtjs/vuetify": {
    "version": "1.11.2",
    ...
    "requires": {
      ...
      "sass-loader": "^8.0.2"
      ...
    }
  }
  ...
}

sass-loader の最新バージョンは現時点で 10.0.1 だったので，対応していなかったということだと思います．

よって，sass-loader のバージョンを下げれば動きます．

$ npm uninstall -D sass-loader
$ npm i -D sass-loader@8.0.2

バージョンの最初についているキャレット記号の意味が知りたい方はこちら．

また，npm で管理するパッケージのバージョン一覧などを見たい方はこちら．