Nuxt.jsのNode Sass (LibSass)をDart Sassに変更する

Sass の@importルールが将来的に廃止され、代わりに@useや@forwardを使うことになるという。新しいルール@useや@forwardは、Sass 公式が推奨する Dart Sass で既に採り入れられている。Node Sass (LibSass)が非推奨ということは、いずれ Ruby Sass のようにサポートされなくなることは十分に考えられる。

そんなわけで、当ブログの Nuxt.js プロジェクトでも使用中の Node Sass を Dart Sass に移行する方法を調べた。

はじめに：Node Sass と Dart Sass の違い

Node Sass

├── scss
│   ├── _base.scss
│   ├── _mixins.scss
│   ├── _variables.scss
│   └──style.scss

@import "_base";
@import "_mixins";
@import "_variables";

_variables.scss 内の変数は、インポート先の style.scss だけでなく、_base.scss でも使うことができる。つまり、グローバル変数としてどのファイルからも参照可能である。

Dart Sass

Dart Sass の@useは、_variables.scss の変数をインポート先でしか参照できない。
また、@useで読み込まれたファイルたちはファイル名に応じた独自の名前空間を持つようになるため、読み込み先ではfilename.$variable filename.mixinといった指定が必要になる。

名前空間はasで書き換えてコンパクトにすることもできる。@useで読み込まれた変数・関数は、空間名＋.＋変数・関数名という形式で使用する。

// variableをva、mixinをmxと命名した例
@use "variables" as va;
@use "mixins" as mx;

.element1 {
  // variableの変数を使う
  background-color: va.$hoge;
}
.element2 {
  // mixinの関数を使う
  @include mx.fuga;
}

@forwardは、ファイルをまたいで値を受け渡すことができる。変数や関数を 1 つのファイルにまとめたい時などに便利。但し、@forwardを使って読み込んだ値を変数・関数として使うことはできない。

実際の設計例

├── /scss/
│   ├── /global/
│   │   ├──_function.scss
│   │   ├──_index.scss
│   │   ├──_mixins.scss
│   │   └──_variables.scss
│   ├── /layout/
│   ├── /object/
│   │    ├── /component/
│   │    ├── /project/
└──style.scss

/global/ フォルダを作成。
function, mixin など機能ごとにまとめた scss を@forwardで/global/_index.scss にインポートする。

@forward "function" @forward "mixins" @forward "variables";

/global/_index.scss を@useで読み込む。

/component/内ファイルで使う例

// 名前空間をgとする
@use "../../global" as g;

.element {
  @include g.hoge;
}

各フォルダに_index.scss を作成し、同階層内に小分けにした scss ファイルがあれば@useで読み込んで 1 つにまとめる。

@use "header" @use "content" @use "footer";

style.scss で各フォルダの_index.scss を@useでインポートし、最終的にまとめる。

@use "global" @use "layout" @use "object/component" @use "object/project";

Nuxt.js での変更

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

node-sass をアンインストールする。

npm uninstall node-sass

Dart Sass、ついでに fibers（処理高速化パッケージ）も入れておいた方がよいらしいのでインストールする。
※Node.js v16 系は fibers 非対応のため、インストールしない

npm install --save-dev sass
npm install --save-dev fibers

nuxt.config.js の設定

Nuxt.js のビルドに Dart Sass（と fibers）を設定

export default {
  build: {
    loaders: {
      scss: {
        implementation: require("sass"),
        // fibersをインストールした場合
        sassOptions: {
          fiber: require("fibers"),
        },
      },
    },
  },
};

参考ページ

• Nuxt.js プロジェクトで LibSass から Dart Sass へ利用を切り替える | コレ棚
• Sass を@import から@use に置き換えるための手引き | Web Design KOJIKA17
• Sass の新しいモジュールシステム - シフトブレイン／スタンダードデザインユニット
• Sass のモジュールシステムを@import から@use に移行する方法を考えてみた | Rriver
• 【Sass】@import を@use に置き換えてみる《FLOCSS 対応》｜ notes by SHARESL
• fibers v5 はまだ Node.js v16 に対応していない。 | eureka