Nuxt.jsプロジェクトでLibSassからDart Sassへ利用を切り替える

  • Sass
  • NuxtJS

はじめに

私がフロントエンド開発でスタイルを実装するときは、Sass(SCSS記法が主)で書くことが多く、開発前にnode-sass(LibSass)をプロジェクトに導入しておくのがほぼ当たり前な状況です。

最近だとDart Sassの利用が推奨されています。また、Sass: LibSass is Deprecatedの公式の記事にあるようにLibSassが非推奨と報告されました。新しい機能はDart Sassの方で追加されていくため、移行は必須と感じました。

そろそろ移行しないとなと思ったので、記事で紹介しようと思った次第です。

Nuxt.jsプロジェクトへDart Sassを導入

パッケージのインストール・アンインストール

まずは、既存プロジェクトからnode-sassをアンインストールします。(すでに導入している場合のみ)

npm uninstall node-sass

次にDart Sassを導入します。READMEに導入や利用について記述されているので、参考にしつつ導入設定をしていきます。

# dart-sassではなく、sassである点に注意
npm install --save-dev sass

JavaScript APIドキュメントを見ると、fibersというパッケージを導入することによりパフォーマンスがよいようなので、併せて導入します。

# fiberではなく、fibersである点に注意
npm install --save-dev fibers

もし、sass-loaderが未導入な場合は導入しておきましょう。(既存プロジェクトの場合はすでに導入済であるはず)

nuxt.config.jsに設定を記述

Nuxt.jsのビルド時にDart Sassとfibersが利用されるようにnuxt.config.jsを編集します。

buildオプションでloaderを設定できます。sass-loaderのオプションにDart Sassとfibersを指定します。

以下、参考資料のリンクです。

// nuxt.config.js 変更点を抜粋.

export default {
  build: {
    loaders: {
      // SCSSを扱う.
      scss: {
        // デフォルト値だと動かないので、sass(Dart Sass)で上書き.
        implementation: require('sass'),
        // sassのオプションにfibersを設定.
        sassOptions: {
          // fibersプロパティではないので注意. (ややこしい)
          fiber: require('fibers'),
        },
      },
    },
  },
}

記述が済んだら、ビルドしてみましょう。

以上でDart Sassとfibersの導入ができました。

この記事を共有

アバター

K.Utsunomiya
男・20代
主にWebフロントエンド技術と気になった音楽について投稿していきます。
最近ハマっていることは、クロスバイクで走ることとジムでの運動です。
詳しいプロフィール

© 2020–2021 コレ棚