CSS/SCSS の利用

Nuxt.js のプロジェクトで SCSS を利用する方法を確認しましょう。

通常のWebサイト開発では、ページ単位のCSSの他に、 サイト全体でのCSSを適用したいケースも多いでしょう。

Nuxt.jsでページ全体のCSSを適用する方法を確認していきましょう。

グローバルなCSSの利用

ページ全体のCSSとして、例えば以下のようなCSSを適用したいようなケースを考えてみましょう。

以下のCSSではブログサイト向けにフォントにserifを適用し、 文字色やline-heightなどの調整を加えています。

body {
  font-size: 20px;
  color: #212529;
  font-family: serif;
}

p {
  line-height: 1.5;
  margin: 30px 0;
}

このCSSをNuxt.jsのプロジェクト全体に適用する場合、 assetsフォルダに css フォルダを作成し、 assets/css/common.css を作成します。 作成したcssフォルダに上記のCSS記述を追加しましょう。

CSSファイルが作成できたら nuxt.config.js の css セクションに以下のようにして 作成したCSSファイルを追加します。

export default {
  // ...
  /*
  ** Global CSS
  */
  css: [
    "~assets/css/common.css"
  ],
  // ...
}

これで、Webサイト上の全てのページに、作成したCSSファイルが適用されるようになります。

SCSS環境のセットアップ

実際のWebサイト開発では、CSSを直接書くよりもSCSSなどのalt cssを利用してCSSを記述するケースの方が多いかもしれません。

Nuxt.jsでは、SCSSを利用したサイト制作もサポートしています。 Nuxt.jsでSCSSを利用した開発環境を構築する場合、まずは以下のコマンドで必要なモジュールをインストールしてください。

$ npm install sass sass-loader fibers

インストールが終わったら nuxt.config.js を開き、 以下のような形で、ファイル上部にモジュールの読み込み追加の記述を追加し、 加えて、 build セクション内に loaders の記述を追加します。

// ファイル上部で以下のモジュール読み込みを追加
const Sass = require('sass')
const Fiber = require('fibers')

export default {
  // build.loaders のセクションに scss オプションを追加
  build: {
    loaders: {
      scss: {
        implementation: Sass,
        sassOptions: {
          fiber: Fiber
        }
      }
    },
    /*
     ** You can extend webpack config here
     */
    extend (config, ctx) {
    }
  }
}

これでSCSSを利用する準備は整いました！

SCSSファイルの利用

必要なモジュールのセットアップが完了したら、実際にSCSSファイルを作成して プロジェクトに適用してみましょう。

先程作成した、 assets/css/common.css と同じ内容で、 assets/scss/common.scss を作成してください。

nuxt.config.jsのcssの指定も、このSCSSに切り替えましょう。

export default {
  // ...
  /*
  ** Global CSS
  */
  css: [
    "~assets/scss/common.scss"
  ],
  // ...
}

これで、サイト上では、assets/css/common.css ではなく、 assets/scss/common.scss が利用されるようになりました。

試しに以下のような形で、assets/scss/common.scssを変更し、 変数や入れ子等のSCSSの機能が利用可能なことを確認してみましょう。

TIP

Nuxt.js における ~ は プロジェクトルートのディレクトリを表します。

$color: #212529;

body {
  font-size: 20px;
  color: $color;
  font-family: serif;
}

p {
  line-height: 1.5;
  margin: 30px 0;
}

vueファイルとCSS/SCSS

Nuxt.jsのプロジェクトでは、CSSは以下の二種類の方法で記述することが出来ます。

• assetsフォルダにcss/scssファイルを作成して、グローバルなCSSとして適用
• vueコンポーネントに直接記述

assets側で作成したcssはnuxt.config.jsから設定を追加して、 プロジェクト全体に適用することが出来ました。

vueファイル側でのcss記述についてももう少し詳しく確認していきましょう。

scoped SCSS

vueファイルに記述されたcss記述は、該当のvueファイルがサイト上で利用されたタイミングで有効になり、 その後、 router-linkでのページ遷移を行った後も、サイト全体で有効となります。

そのため、例えば pages/about.vue で以下のような文字色指定をCSSで行った場合、 /about URLに遷移後文字色は赤になり、そのスタイルはページ遷移後も、 サイト全体に適用されてしまいます。

<style>
  p{
    color: red;
  }
</style>

vueファイル内で記述したcssの効果を該当のvueファイル内のみに留めたい場合、 Scoped CSS と呼ばれる機能を利用するのが便利です。 Scoped CSSはvueファイルのstyleタグに scoped キーワードを追加することで有効になります。

<style scoped>
  p{
    color: red;
  }
</style>

scopedを記述したセクションのCSSは、そのvueファイル内でのみ有効となり、 他のvueファイルとのクラス名の衝突等を意識せずCSSのコーディングを進めていけるようになります。

vueファイルでscssを利用する

一度、SCSSのセットアップを完了すると、vueファイル内でもSCSSを利用することが可能になります。

vueファイル内でSCSSを記述するには、 style要素に lang="scss" を追加します。

<style lang="scss" scoped>
  $color: red;
  p{
    color: $color;
  }
</style>

SCSSのimport構文を利用して、 assetsフォルダに配置したscssをimportすることも可能なため、 ページ間で、フォントや文字色を変数で共通化したり、 mixinを共有したりすることもできるため非常に便利です。

<style lang="scss" scoped>
  @import "~assets/scss/mixins.scss"
  p{
    color: red;
  }
</style>

Check!

次のステップに進む前に以下の内容をもう一度確認しておきましょう。

• サイト全体にcss/scssを適用する方法を確認しておきましょう。
• vueファイルでscssを利用する方法を確認しておきましょう。
• vueファイルにおけるscoped cssの記述方法を確認しておきましょう。