親バカエンジニアのナレッジ帳

webのエンジニアをやっており、日頃の開発で詰まったことや書き残しておきたいことを載せています。

Nuxtのソース表示でcssが全部出力されないようにする方法

Nuxtでソースの表示

ブラウザ上からページのソースを見ることができますが(Chromeで「ページのソースを表示」を実行する)Nuxtでソースを表示させた時にデフォルトの設定だとCSSが全部出力されませんか?
本来見たい部分までひたすらスクロールして大変な思いをしている人もいることでしょう。
特にSSRをするNuxtではソースをしっかり確認したいですよね。

extractCSSの設定を変更するだけで解決

解決方法は至って簡単。
以下のように、nuxt.config.jsのbuild内に「extractCSS: true」を入れるだけです。
nuxt.config.js

build: {
  extractCSS: true,
  extend(config, ctx) {
  }
}

extractCSSはCSSを外部ファイルにする設定ですね。
デフォルトではこの設定がfalseになっているので全部表示されてしまうようです。