UIkit @use 考察 (3) - 独学者Fossa

Name	Version
Dart Sass	1.92.0
UIkit	3.23.12

前回で不足していた内容を、追加します。

上記の変数は、URLエンコードが必要みたいです。

UIkitでは、#をcompoents/mixin.scssで置き換えて、コンパイルする時に、帳尻をあわせているような気がします。

@importではなく、@useを使うと、uk-lightやuk-darkがあるcompoenents/inverse.scssに、@extendの行を追加する必要があるみたいです。

@extendの行の並びが正しければ、UIkitが生成したscssファイルを使ってコンパイルした内容と、ほぼ同じになるはずです。

下記のどちらを採用するか、結論を出していません。

src/scss/componentsの各ファイルから@extendの行を取り出し、最後にまとめてcompoenents/inverse.scssに、アペンド
並び替えたものを用意しておいて、compoenents/inverse.scssにアペンド

Dart Sassの1.92.0で、mixed-declsが廃止されたみたいです。

下記のように、--silence-deprecation=mixed-declsを外すと、エラーはゼロでした。

lessファイルから、scssファイルに正しく変換しているような気がします。

{
    "scripts": {
        "scss": "sass --no-source-map --load-path=custom ./src/scss/uikit.scss:dist/main.css",
    }
}

UIkitのsrc/scssを見ると、@use文が追加されています。