【Vue.js/Nuxt.js】SCSSを使う

私はCSSを書くとき、必ずSCSSを利用する。

通常のCSSをそのまま書くよりも構造化されているため

圧倒的に書きやすい。

SCSSは最終的にCSSに変換する必要があり、

そのためのツールがnpmで提供されている。

必要なパッケージは２つ。

SCSSなのにsassで混乱するかもしれないが、気にしない。

以下のコマンドで一気にインストールする。

$ npm install -D node-sass sass-loader

SCSSの変換は開発時のみ必要で、

本番では不要なパッケージになるので-Dオプションをつけておく。

Vue.jsやNuxt.jsで使いたいときはこれ以外に作業は不要だ。

後は.vueファイルのstyleタグに

SCSS形式で記述することを明記してあげれば良い。

<template>
  ...
</template>

<style lang="scss" scoped>
.myClass {
  color: #ffffff;
}
</style>