この記事は最終更新日から 2 年以上が経過しており、内容が古くなっている可能性があります。
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
この記事がお役に立ちましたら、サポートをお願いします。
Suzunatsu Websiteをサポート