Nuxt.jsでSCSSを使う | Nuxt.js作業ログ03

前回に続いて引き続きNuxt.jsの環境設定メモです。今回はvueファイルのスタイルをSCSSで書けるようにします。

yarnでインストール

$ yarn add -D node-sass sass-loader

node-sassとsass-loaderをインストールします。

index.vueのstyleにlang属性を追記

インストールが終わったら/app/pages/index.vueのstyle部分を以下のように書き換えましょう。

<style scoped lang="scss">
$key: red; // 追加

// 〜 略 〜

.title {
  font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  display: block;
  font-weight: 300;
  font-size: 100px;
  // color: #35495e; //コメントアウト
  color: $key; // 追加
  letter-spacing: 1px;
}

// 〜 略 〜
</style>

ポイントはstyleタグにlang属性を追記し、値に「scss」を指定することです。これでstyleタグの中でscssが使えるようになります。

SCSSの動作確認のため、一行目に$Keyという名前の変数を追加し、titleクラスのcolorに設定しました。

画面で確認

$ yarn run dev で確認するとちゃんとタイトル部分の文字色が赤になっています。