UIkit hook mixin 考察 (3)

Name	Version
Dart Sass	1.70.0
UIkit	3.17.11

前回と、前々回で、UIkitを@useや@forwardに置き換えられるか試しました。

一つだけ気になったことがあります。

カスタムテーマの位置が、フレームワーク内にあることが前提になれば、さすがにマズイよね？と思いました。

ファイルやディレクトリの位置は、検証する時だけの位置であり、本番環境で使われることを想定していません。

察しが良い人だと気づいたと思いますが、これは簡単に解決できます。

フレームワーク側が、@useや@forwardに置き換わったと仮定した場合の説明です。*1

Sassには、--load-pathというオプションがあります。

私の場合は、--load-path=./node_modulesとして使うことが多いです。

--load-pathというオプションは、複数設定できるので、カスタムテーマがある位置を指定すればいいのです。

例えば、Laravelで使う場合だと、--load-path=./resources/scssという感じになると思います。

load-path	説明
node_modules	UIkit
resources/scss	カスタムテーマ用

前回で、相対パスで記述した部分を変更します。

@forward 'uikit/src/scss/variables.scss' with (
  $global-color: #999    // オリジナルは、#666
);

@use 'theme/variables.scss' as *;

.uk-accordion-title:hover {
    color: $accordion-title-hover-color;
}

theme/variables.scssは、resources/scss/theme/variables.scssを指すよう、設定します。

sass --load-path=./node_modules --load-path=./resources/scss  --style expanded resources/scss/main.scss:public/assets/css/main.css

resources/scss/main.scssの中身。

@use 'uikit/src/scss/components';

UIkitのthemeを使いたい時は、下記のように変更すれば良いはずです。*2

sass --load-path=./node_modules/uikit/src/scss  --style expanded resources/scss/main.scss:public/assets/css/main.css

resources/scss/main.scssの中身。

@use 'components';

Lessから、@useや@forwardを使用したSCSSに変換するプログラムを作成しながら、検証しています。

コンポーネントの数が多いので、全てのコンポーネントを変換した上で検証したわけではないのですが、おそらく問題ないはずです。

Dart Sassのv1.71.0から--pkg-importerが使えるようになりました。

CHANGELOGに、sass --pkg-importer=nodeと@use "pkg:bootstrap"を記述すればいいと、書いてあります。

Bootstrap 5.3.2で、実際に試したら、ちゃんとコンパイルされていました。

*1:今の状態では試すことは出来ません

*2:試していないので、妄想です(笑)

独学者Fossa