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

この記事は最終更新日から 1 年以上が経過しており、内容が古くなっている可能性があります。

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

Sass公式サイトの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"),
        },
      },
    },
  },
};

参考ページ

Suzunatsu

このブログについて

コーディングやWeb関連技術の記事と、買い物など日々のメモから成り立っています。 →少しだけ詳しく

この記事がお役に立ちましたら、サポートをお願いします。

広告