【Nuxt.js】extractCSSを設定してCSSを外部ファイルに抽出する

はじめに

この記事ではNuxt.jsで使用するcssを外部ファイルに抽出するための設定方法を紹介します。

extractCSSを設定する

Nuxt.jsではデフォルトではextractCSSがfalseに設定されています。
そのため、例えばChromeで「ページのソースを表示」を実行するとcssのスタイルがインクルードされていることが確認できます。

build プロパティ

Nuxt では、webpack の設定をカスタマイズして web アプリケーションを思いのままに構築することができます。

ja.nuxtjs.org

内部で extract-css-chunks-webpack-plugin が使われ、全ての CSS は別々のファイルに、通常はコンポーネントごとに1つ抽出されます。これは CSS と JavaScript を別々にキャッシュすることを可能にし、多くのグローバルまたは共通 CSS が存在する場合には試してみる価値があります。

このスタイルを外部CSSに抽出するためには、「nuxt.config.js」でextractCSS: trueを設定する必要があります。

nuxt.config.js

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

  extractCSS: true // この行を追加
}