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'