Nuxt.jsプロジェクトでDart Sassを使う #JavaScript

2020/05/03 追記
本記事は以下サイトに移転しています。
https://kimulaco.com/post/nuxt-dart-sass/

本記事をストックしていただいた方もいると思いますので、現時点での記事内容は残しますが、記事の更新等は移転先のみで行います。

Nuxt.jsプロジェクトにDart Sassを導入した時の知見。

Node.js v10.16.3
Nuxt.js v2.10.2
sass(Dart Sass) v1.23.1
create-nuxt-appなどでNuxt.jsプロジェクトを構築済み
scssを使用

Dart Sassとは

Dart Sassとは、Googleが開発するDartというプログラミング言語で作成された、Sassのコンパイラです。DartはJavaScriptにコンパイル可能なため、node-sassと同じようにnpm経由でインストールできます。少しわかりにくいですが、sassというパッケージ名でnpmに公開されています。

また、Dart SassにはSassの新しい機能が先行実装される予定があったり、Node.jsのバージョン依存問題も解消できるなどのメリットがあるので、今後のSassコンパイラのスタンダードになることも考えられます。

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

Dart Sassを導入する前に、create-nuxt-appなどでNuxt.jsプロジェクトを作成しましょう。

Nuxt.jsでDart Sassを使うためにはsass(Dart Sass)とsass-loaderが必要です。さらに、コンパイル速度を向上させるためにfibersのインストールも推奨されているので、次のようにyarnやnpmでパッケージをインストールします。

yarn add -D sass sass-loader fibers

次に、nuxt.config.jsにsass-loaderの設定を追記します。node-sassの場合は特に何も設定せずに使用できましたが、Dart Sassを使用する場合は、現状追加で設定が必要なようです。

Dart Sassに関連する部分だけ抜粋すると次のようになります。

// nuxt.config.js
const Sass = require('sass')
const Fiber = require('fibers')

export default {
  ...
  build: {
    loaders: {
      scss: {
        implementation: Sass,
        sassOptions: {
          fiber: Fiber
        }
      }
    }
  }
}

これでインストールと設定は終わりです。.vue ファイルにDart Sassを書くときは、node-sassと同じように、<style> 要素に lang="scss" 属性を付与するだけです。

<template>
  <p>Hello World!</p>
</template>

<script>
export default {
  name: 'HelloWorld'
}
</script>

<style lang="scss">
p { color: tomato; }
</style>