Sassでfunctionの読み込み方

Question

「_convert-rem.scss」ファイルのfunction remを
「_header.scss」で使用したいのですが、
以下指定だと「bundle.css」のように正しくコンパイルされません。
functionの指定方法が間違っているのでしょうか。

@charset "UTF-8";

@use "package/common";
@use "package/function";
@use "package/layout";
@use "package/object";

@charset "UTF-8";

@forward "../function/convert-rem";

$base-font-size: 16px !default;

_convert-rem.scss

@use "../common/variable";

@function rem($pixels) {
    @return $pixels / $base-font-size * 1rem;
}   

@use "../common/variable";

.header__container {
  height: rem(94);
}

.header__container {
  height: rem(94);

Comments

[miyabi_pudding]

bundle.scssをコンパイルすると、
`height: rem(94);`と出力されてしまう、ということでしょうか？

[maru_1997]

おっしゃる通り、height: rem(94);と出力されてしまいます。

[miyabi_pudding]

@useの使い方が、正しくないのかもしれません。

https://haniwaman.com/dart-sass/

この記事を参考に構文を修正し、それでもダメならコメントください。

Answer 1

@functionを使用するファイルと同じ階層に配置することで、正しく使えるようになりました。