[ 目次 ]

• はじめに
• Nuxt.jsのコンポーネント固有のStyleについて
• SCSS の活用（Componetから読み込むファイルの用意）
• Nuxt.jsのComponentからSCSSを読み込む
• 最後に

はじめに

こんにちは、香港に住んでいるWEBデベロッパーのなかむ（@nakanakamu0828）です。

今回は本ブログのNuxt.jsでComponent内のstyleにassets配下のscssを読み込む方法を試していきたいと思います。
scssファイルを共通利用することを目的としています。

【前提】

• 既にscssが利用できる環境になっていること
  → node-sass, sass-loaderがインストールされている
• nuxt.config.jsにて グローバルなスタイルを定義する '~/assets/style/app.scss' が読み込まれている

  css: [
    '~/assets/style/app.scss',
  ],

• CSSフレームワークとしてBulmaを利用する

Nuxt.jsのコンポーネント固有のStyleについて

Nuxt.js では Vue.js の style 機能を利用して、コンポーネント固有の CSS を記載することができます。
その際はvueファイルのstyleタグにscoped属性を設定します。
また、今回はstyleをscssで記述する為、langプロパティにscssをセットします。
コンポーネントとなるvueファイルは以下のようなテンプレートになります。

// コンポーネントのUIをhtmlで記述
<template>
  ...
</template>

// コンポーネントの処理を記述
<script>
  ...
</script>

// コンポーネントのstyleを記述
<style lang="scss" scoped>
<style>

Vue.js公式サイトのコンポーネントスタイルのスコープ もご確認ください。

SCSS の活用（Componetから読み込むファイルの用意）

今回はscssで定義して変数ファイル _variable.scssをコンポーネントから読み込んで利用したいと思います。
~/assets/style/_custom/_variable.scss ファイルを以下のように作成しましょう。

// bulmaの変数を読み込む為
@import "~bulma/sass/utilities/_all";

$variable-columns: false;
$primary: #579fbf;
$primary-invert: findColorInvert($primary);
$danger: #ff5f5f;
$danger-invert: findColorInvert($danger);
$twitter: #4099FF;
$twitter-invert: findColorInvert($twitter);
$facebook: #3B5998;
$facebook-invert: findColorInvert($facebook);

このファイルは styleのルートファイルとなる~/assets/style/app.scssからも読み込みます。
全体デザインに適応する為です。

app.scssからは

@import "_custom/_variable";

のように読み込むことができます。

Nuxt.jsのComponentからSCSSを読み込む

それでは、Componetのstyleにて読み込む方法です。import宣言だけです・・・

<style lang="scss" scoped>
@import "~assets/style/_custom/_variable.scss";
<style>

最後に

今回はNuxt.jsの基礎として覚えておきたいstyleの使い方をまとめました。