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

2021年01月20日

Ad Area

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

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

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

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

npm uninstall node-sass

Dart Sass、ついでにfibersというパッケージも入れておいた方がよいということでインストールする。

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

nuxt.config.jsの設定

Nuxt.jsのビルドにDart Sassとfibersを指定するよう設定

nuxt.config.js

export default {
  build: {
    loaders: {
      scss: {
        implementation: require('sass'),
        sassOptions: {
          fiber: require('fibers'),
        },
      },
    },
  },
}

Sassの記法を修正

従来のNode Sassの場合

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

style.scss

@import '_variables';
@import '_mixins';
@import '_base';

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

また、@useで読み込まれたファイルたちはファイル名に応じた独自の名前空間を持つようになるため、読み込み先では filename.$variable filename.mixinといった指定が必要になる。

名前空間はasで書き換えてコンパクトにすることもできる。

_base.scss

@use 'variables' as va;
@use 'mixins' as mx;

.header {
    background-color: va.$color-01;
}
.c-button-more {
    @include mx.btn-basic;
}

style.scssは、従来通りファイルを読み込むだけのscssにしておく。

style.scss

@use 'base'

参考ページ

Ad Area