GridsomeでSassを使えるようにする

Posted
GridsomeでSassを使えるようにする

Sassとは?

SassはCSSを効率的に記述できるように設計・開発された言語であり、CSSの場合、長く複雑になってしまう記述であっても、わかりやすくシンプルに書けるというところが特徴です。

出典:https://ferret-plus.com/12503

Sassを使用すると、ネストが使えたり変数が使えたりその他もろもろで、一言でいうとCSSを書く効率がグンと上がるようになります。

GridsomeにSassを導入する

入れて損はないSassをGridsomeに導入する方法ですが、全く難しいことはありません。以下の2つのライブラリを入れるだけで使用できるようになります。

yarn add -D node-sass sass-loader

はい、これだけで問題なく使用できます。私はSCSS記法を普段使います。

VueのSFCで使う場合は以下のようにlangを指定すればOKです(SCSSの場合)

<style lang="scss">

</style>

おわりに

GridsomeでSaasを使う方法について書きました。VueやNuxtではデフォルトで使えるものですが、Gridsomeでは別途ライブラリを入れる必要があります。といってもライブラリを入れるだけで使えるようになるので、Gridsomeを使うときは最初から導入しておくのが良いと思います。

© 2022 K note.dev