NUXT.JS 入門 #5 – NUXT.JS と CSS の管理

Nuxt.js を利用したWebアプリケーション開発の手法を紹介していきます。
第五回目は Nuxt.js のアプリケーションにおける CSS の管理手法を紹介していきます。

Nuxt.js では Vue.js の style 機能を利用して、コンポーネント固有の CSS を展開することが出来ます。

コンポーネント固有のCSS を記述する際には .vue ファイルの style タグに scoped プロパティをセットします。

<template>
  ...
</template>

<script>
  ...
</script>

<style scoped>
  .btn{
    color: red
  }
<style>

style に scoped を付与した場合、コンポーネント内に特殊な属性が付与され、style 内に記述したCSS はコンポーネント内でのみ有効なCSSとなります。

コンポーネント固有の要素等に対して、クラス名の衝突等を考慮せずにラフにCSS スタイリングを行う際に便利な機能です。

SCSS の活用

コンポーネント毎に個別の CSS 空間を持つとしても、全てのコンポーネントで個別にCSSを記述するのは不便なケースも多々あります。

色やpxなどアプリケーション全体で共通のスタイルを適用したい際などには、コンポーネント間で個別のCSS 空間が存在することはかえって不便だったりします。

単純にコンポーネント間で共通のスタイルを用いたい場合には、SCSS を利用して変数や mixin などを利用するのが良いでしょう。

例えば、 assets/scss フォルダを作成して assets/scss/mixins.scss を配置し以下のように記述してみましょう。

$color: red;

@mixin btn(){
    padding: .5em 1.5em;
}

このSCSSをコンポーネント内で利用するには次のようにします。

<style scoped>
  @import "~/assets/scss/mixins.scss"
  .btn{
    @include btn;
  }
  .title{
    color: $color;
  }
<style>

グローバルなCSS の利用

コンポーネント毎にCSSを記述しつつ、SCSS を使ってスタイルを適宜共通化する…通常コレさえ実施しておけば特に問題がないように思えるかもしれません。

しかし大規模なアプリケーションでは、次のような問題も発生してきます。

  • 各コンポーネントが似たようなCSSを個別に定義・保有するためファイルサイズが増大する。
  • 各コンポーネントで似たようなSCSS のインポートが行われ管理上の手間が増える。

多くのコンポーネントで参照されるコンテナクラスや頻出UIのスタイル定義は、コンポーネント内で個別に定義するよりも、むしろグローバルなCSSとして定義するほうが、管理上楽なケースもあるでしょう。

Nuxt.js ではもちろんグローバルなCSS を定義して利用することも出来るようになっています。グローバルなCSS をNuxt.js のプロジェクトに適用するには nuxt.config.js に以下のように記述します。

module.export = {
  css:[
    "~/assets/scss/app.scss"
  ],
}

これで ~/assets/scss/app.scss がグローバルなCSS としてアプリケーション全体に適用されるようになりました。

css のセクションでは scss や css ファイルを参照する他、npm 経由でインストールしたモジュールを参照することも可能です。

ex. bulma の利用例

module.export = {
  css:[
    "bulma"
  ],
}

ex. bootstrap の利用例

module.export = {
  css:[
    "bootstrap/scss/bootstrap.scss"
  ],
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です