Node Sass(LibSass) → Dart Sass 移行メモ書き
割り算
//今まで
foo/bar
//Dart Sass
@use 'sass:math';
math.div(foo, bar);
Mixinや関数はglobalフォルダにまとめておく
global/_index.scss で global のファイルを @forward でまとめて読み込んでおく
@forward './mixins';
@forward './functions';
@forward './variables';
必要に応じてglobal内でも必要なファイルを読み込む
_mixin.scss
@use '../global/variables' as *;
@import → @useに書き換え
@use 'layout/header';
@use 'layout/footer';
@use 'layout/container';
@use 'layout/sidebar';
...
各ファイルの冒頭で global ファイルを読み込んでおく
ネスト内で別ファイルを読み込む
@use 'sass:meta';
.entry-content {
@include meta.load-css('gutenberg/blocks/block-heading');
@include meta.load-css('gutenberg/blocks/block-list');
}
参考リンク
https://lunalunadesign.net/2022/09/2895/#WordPress_Sass_import
https://zenn.dev/kagan/articles/1aa466bb6ef8eb