Angular17 載入 Material Symbols 發生 SASS 無法解析 CSS

這篇文章在處理 Angular 安裝 CSS 相關套件時，發生 SASS 無法解析 CSS，而開啟套件資料夾，可以看見相關無法解析的內容已經下載在專案中。出現此項錯誤，身為新手的筆者，往往因為這載入就發生錯誤，就歸咎版本不相容，或套件沒有跟上最新框架版本，都是它們的錯，然後就放棄這個套件。但，人生就是這麼多 BUT。在工作上有提出使用新版 Angular 進行開發的概念，需要筆者先試行少部分功能，還是只能矇頭解決...，下面就開始解決歷程吧。

node_modules 檔案樣態

錯誤樣式 X [ERROR] Could not resolve "./material-symbols-outlined.woff2" [plugin angular-css-resource] ...

錯誤代碼形式

# terminal

...
> ng serve           

Application bundle generation failed. [2.265 seconds]
X [ERROR] Could not resolve "./material-symbols-outlined.woff2" [plugin angular-css-resource]

    src/styles.scss:12365:11:                                                                
      12365 │   src: url("./material-symbols-outlined.woff2") format("woff2");
            ╵            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  Preprocessor stylesheets may not show the exact file location of the error.


X [ERROR] Could not resolve "./material-symbols-rounded.woff2" [plugin angular-css-resource]

    src/styles.scss:12390:11:
      12390 │   src: url("./material-symbols-rounded.woff2") format("woff2");
            ╵            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
      12415 │   src: url("./material-symbols-sharp.woff2") format("woff2");
            ╵            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  Preprocessor stylesheets may not show the exact file location of the error.

Watch mode enabled. Watching for file changes...

出現這樣的原因是因為 SASS 並無原生的 URL 的改寫功能，而引用套件的字體路徑是通過 SASS 變數動態產生，所以導致建構時無法正確解析字體路徑。material-symbols 套件提供了 $material-symbols-font-path 變數，在提供此變數情況下，則無須透過上述方式產生字體路徑。

完整設定步驟

Step1: 安裝 material-symbols

來源: npm material-symbols

# terminal

npm i material-symbols

Step2: 套件載入 Angular 專案

# src/styles.scss

...
//$material-symbols-font-path: '../node_modules/material-symbols/';
@import 'material-symbols';
...

經上述步驟即可完成 Material Symbols 套件載入。此外筆者也在網路上找到另一篇解決方式，將附於第一篇參考資料中，但本著不懂的內容盡量維持原設定與觀察編譯速度後，選擇了上述方法。

Material Symbols 預設線條 Icon 改為實心 Icon

可順利使用 Material Symbols 後，發現預設 Icon 都是線條 Icon，有時部分需要調整為實心 Icon，此時就要利用 style 中的 font-variation-settings ，font-variation-settings 提供了四個控制屬性，FILL 實心狀態、wght 線條粗細、GRAD 線條視覺平衡與 opsz 大小。

• FILL 實心狀態: 0: 線條 Icon ，1: 實心 Icon
• wght 線條粗細: (100 ~ 700) 常以 100 整數倍設定，數字越大線條越粗，影響 Icon 整體大小。
• GRAD 線條視覺平衡: (-25、0、200) 與 wght 相同，但效果較不顯著。
• posz RWD 線條調整: (20dp ~ 48 dp) 線條粗細依 Icon 大小改變。

由於筆者美感感知力不足，因此還是只會使用 FILL 來控制 Icon。

範例程式

example.html

# example.html 

...
<div class="custom-icon">
  <span class="material-symbols-outlined">key</span>
</div>
...

example.scss

# example.scss

...
.custom-icon {
  font-variation-settings: 'FILL' 1, 'WDTH' 100, ...;
}
...

參考資料

1. stackoverflow - can not resolve woff2 files during compilation using material-symbols (Angular)
2. github - angular/angular-cli - SASS: unable to resolve resource specified in the CSS url(...) function #26339
3. 傑米的沙龍 - 在網頁中加入預設或自定義 icon 通通搞定 - Material Symbols 使用攻略