Nuxt.jsのプロジェクトにSassを導入する方法 #Nuxt

Nuxt.jsのプロジェクトに、Sassを導入する方法を紹介します。

パッケージをインストール

Sassを読み込むためのパッケージをインストールします。

$ npm i -D node-sass sass-loader

これだけで、特に設定ファイルを編集することなくSassを使用することができます。

コンポーネント内のstyleブロックにlang="sass"を指定します。

<style lang="sass">
.foo
    font-color: red
</style>

コンポーネント内のstyleブロックにlang="scss"を指定します。

<style lang="scss">
.foo {
    font-color: red;
}
</style>