【Angular】外部ライブラリ内のscssファイルを参照するアプローチ

SassError: Can't find stylesheet to import.

理不尽にnode_modules内の所定の位置にあるはずのscssファイルが読み取れない時、
ビルド時に下記のようなエラーが出る。

./src/app/app.component.scss?ngResource - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
1 │ @use "~@hoge/style";
  │ ^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/app/app.component.scss 1:1  root stylesheet

前提

Angular v13
Node 14.19.3
sass-loader 12.4.0

回避策

1. ~をつけるのを止める。
sass-loaderの仕様として、~を付ける事で明示的にnode_modules配下のパスである事を指定出来る。が、動き的に最初は相対パスで解決しようとした後に、node_modules配下での解決を試みるようにはなってるらしい。
https://webpack.js.org/loaders/sass-loader/#resolving-import-at-rules

@use "@hoge/style";

でも、多分これで解決出来るケースはそんなない。

2. angular.jsonでstylePreprocessorOptionsを記述する。
設定したincludePathsに対して、相対パスを必要とせず、プロジェクトのどこからでもインポート出来る様になるので、これを利用する。

angular.json

"stylePreprocessorOptions": {
    "includePaths": [
        "node_modules/@hoge"
    ]
}

インポートする側の記述もこれだけで良くなる。

@use "style";

もしもの時はお試しあれ。