
Sassとは?
SassはCSSを効率的に記述できるように設計・開発された言語であり、CSSの場合、長く複雑になってしまう記述であっても、わかりやすくシンプルに書けるというところが特徴です。
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を使うときは最初から導入しておくのが良いと思います。