Nuxt.js初心者が外部CSSファイルの操作を学ぶ

シェアする：

投稿日時：2020年7月5日

この記事をおすすめしたい人

  • WordPressしか知らないのにNuxt.jsを始めようとしてる人
  • Nuxt.jsで外部CSSを読み込みたい人
  • Nuxt.jsで外部CSSに出力したい人
  • つまりオレ

何も知らない超初心者が脱WordPressしたくてNuxt.jsでサイト構築していくシリーズです。

えー、今回はhead内に外部CSSを読み込んだり、外部CSSを参照したりするお話をしたいと思います。

WordPressの上でな！

※ このブログはWordPress製です

Nuxt.jsの初期設定のCSS

サンプルではそもそも外部CSSを読み込むようになっていませんでした。

Nuxt.jsのシステム、レイアウト(default.vueなど)、各ページのvueファイル(index.vueとか)、コンポーネントの順に、各vueファイルに記載されたスタイルをインラインで読み込む設定のようです。

デモ画面のスタイルはこう↓。 


<head >

(略)

//node_modules\@nuxt\vue-app\template\components\nuxt-loading.vue
<style data-vue-ssr-id="7e56e4e3:0">
(略)
</style>

//node_modules\@nuxt\vue-app\template\components\nuxt-build-indicator.vue
<style data-vue-ssr-id="7e49e411:0">
(略)
</style>

//layouts\default.vue
<style data-vue-ssr-id="56b15182:0">
(略)
</style>

//pages\index.vue
<style data-vue-ssr-id="1b7833da:0">
(略)
</style>

//components\Logo.vue
<style data-vue-ssr-id="1930a9a0:0">
(略)
</style>

</head>

「nuxt-build-indicator.vue」は「npm run dev」の状態では読み込まれていますが、ビルドしたHTMLには含まれていませんでした。

「nuxt-loading.vue」から読み込まれる3つのクラスだけはビルド後も読み込まれます。

  • .nuxt-progress
  • .nuxt-progress.nuxt-progress-notransition
  • .nuxt-progress-failed

他はレイアウト＞各ページ＞コンポーネントの順で読み込まれます。

レイアウトのCSSの用途

同じレイアウトである限り共通で読み込まれるので、共通のCSSは全部ここに放り込むのがよさそう。

各ページのCSSの用途

基本はレイアウトのCSSを使い、そのページだけの独自のパーツとか、レイアウトのスタイルをちょっと上書きしたい場合とかに使うのが良さそう。

わざわざクラス分けしなくても別のページに影響しないのがいいですね。

コンポーネントのCSSの用途

コンポーネント単位でもスタイルを書くことができます。

コンポーネントがレイアウトに組み込まれている場合、レイアウト側でも書くことができますが、一番のメリットはコンポーネントの機能とスタイルをパッケージ化できる点じゃないでしょうか。

管理がしやすそう。

外部CSS読み込むメリットある？

ぶっちゃけ、ないんじゃないかな…。

Nuxt.jsのデフォルトの管理の仕方はメンテナンス性もよく、わざわざ分離させる理由はないような気がします。

ですが次の2点から方法だけは学んでおくことにしました。

手札として持っておきたい

今後どういう要望が出てくるか分からないので、手段だけは知っておきたいです。

vueファイルの行数が増えると編集しにくくなる

ページのvueファイルにスタイルを含めておくと、vueファイルの行数が1000行とかになった時に困りそうな気がします。

templateタグとstyleタグ間で数百行を行ったり来たりしないといけません。

外部CSS読み込みの設定

Nuxt.js公式マニュアルにやり方が載っていました。

ページ開いた状態ではindex.vueのソースが表示されているので左上のメニューボタンを押して「nuxt.config.js」を開くとコードが確認できます。 


export default {
  css: [
    '~/css/main.css',
  ],
}

このコードで「css」フォルダの中にある「main.css」を読み込みます。

「css」フォルダは初期設定では存在しないので、「assets」フォルダで管理する場合はこう↓。 


export default {
  css: [
    '~/assets/main.css',
  ],
}

こんな↓風にすると複数のCSSファイルを読み込むこともできます。 


export default {
  css: [
    '~/css/main.css',
    '~/css/sub.css',
  ],
}

HTMLでの出力結果

上記コードで出力するとこう↓なりました。 


<head >

(略)

//css\main.css
<style data-vue-ssr-id="fe9e3910:0">
(略)
</style>

//node_modules\@nuxt\vue-app\template\components\nuxt-loading.vue
<style data-vue-ssr-id="7e56e4e3:0">
(略)
</style>

//node_modules\@nuxt\vue-app\template\components\nuxt-build-indicator.vue
<style data-vue-ssr-id="7e49e411:0">
(略)
</style>

//layouts\default.vue
<style data-vue-ssr-id="56b15182:0">
(略)
</style>

//pages\index.vue
<style data-vue-ssr-id="1b7833da:0">
(略)
</style>

//components\Logo.vue
<style data-vue-ssr-id="1930a9a0:0">
(略)
</style>

</head>

head内の一番最初に、指定したCSSファイルの中身が追加されました。

って、あれ？

またインラインで展開されています。

LINKタグで外部CSSを参照する方法

Nuxt.js公式マニュアルに説明がありました。

ただのLINKタグなのでFaviconの設定と同じやり方のようです。 


export default {
  head: {
    link: [
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto&display=swap' }
    ]
  }
}

ローカルのCSSを参照する場合の方法

まずは目的のCSSを「static」フォルダに入れます。
(「static\css\main.css」とします)

この場合は「href」の部分をこの↓ように書き換えます。 


export default {
  head: {
    link: [
      { rel: 'stylesheet', href: '/css/main.css' }
    ]
  }
}

全てのCSSを外部CSSとして出力したい場合

レイアウトやindex.vue、コンポーネントに書かれているCSSを敢えて外部CSSとして出力する場合です。

Nuxt.js公式マニュアルによると、「nuxt.config.js」内の「build」プロパティに「extractCSS」を追加して「true」に設定してね(デフォルトfalse)、とのことでした。

さっそく設定↓。 


export default {
  build: {
    extractCSS: true,
  }
}

出力結果↓。 


<head >

<link rel="preload" href="/_nuxt/app.css" as="style">
<link rel="preload" href="/_nuxt/pages/index.css" as="style">

<link rel="stylesheet" href="/_nuxt/app.css">
<link rel="stylesheet" href="/_nuxt/pages/index.css">

</head>

先読みのための「preload」と「stylesheet」で2つのファイルが追加されました。

「app.css」の中身は次の3つ。

  • nuxt-loading.vueのスタイル
  • nuxt-build-indicator.vueのスタイル
  • レイアウト(default.vue)のスタイル

「index.css」の中身は次の2つ。

  • そのページ(index.vue)のスタイル
  • コンポーネント(Logo.vue)のスタイル

「nuxt.config.js」内の「css」プロパティで外部CSSを読み込んでいた場合は、「app.css」内の次の赤字の位置に追加されるようです。

  • nuxt-loading.vueのスタイル
  • nuxt-build-indicator.vueのスタイル
  • 外部CSSのスタイル
  • レイアウト(default.vue)のスタイル

まとめ

  • 外部CSSをインラインで読み込む場合は「nuxt.config.js」の「css」に設定
  • 外部CSSをそのまま参照させる場合は「nuxt.config.js」の「head」内「link」に設定
  • vueファイル内のスタイルを外部CSSとして出力したい場合は「nuxt.config.js」の「build」に「extractCSS」を設定

これで外部CSSに関することはあらかたできるようになったんじゃないかと思います。

以上、WordPressからお届けしました！

Nuxt.js HEADタグ操作編の目次

シェアする：
Nuxt-HEADタグ操作編,Nuxt.js