CODEWITHSUNDEEP
angularwoff2
pin54
pin54

Reputation: 51

can not resolve woff2 files during compilation using material-symbols (Angular)

I installed package with npm, but when I add

@import 'material-symbols';

in my style.scss, I get these errors when I try to build the project.

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

    src/styles.scss:7:11:
      7 │   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:32:11:
      32 │   src: url("./material-symbols-rounded.woff2") format("woff2");
         ╵            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

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


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

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

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

I am not sure if it is important, but I think it is. These files (woff2) are marked in node_modules by IntelliJ as 'Excluded from compilation'. I do not know what mechanism did it but I can not change it (or don't know how).

This problem appears also in completely new project. If I want to repeat error I just generate new project with CLI, install package, add @import into scss and I get error.

It's looks like a bug, but because I didn't find any clues in the Internet (so, no one else has similar problem) I assumed that the reason is my lack of knowledge :)

EDIT:

I found out a solution, but I need to read a little more to understand. But if you have similar problem just search by keywords: webpack and esbuild angular 17. The change was implemented in Angular 17, so previous versions should works correctly. I had to change only two lines in angular.json:

Before change

      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
               "browser": "src/main.ts",

After

   "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
               "main": "src/main.ts",

I didn't put this info as an answer because I hope someone will write some short, clear explanation.

Upvotes: 4

Views: 1914

Answers (1)

simonbauerAT
simonbauerAT

Reputation: 51

I found 2 different solutions. I am using outlined symbols tho, so maybe you need to adapt to your desired icon style.

solution1: import via angular.json or project.json (if using nx workspace)

"assets": [
          ".../src/favicon.ico",
          ".../src/assets"
        ],
        "styles": [
          ".../src/styles.scss",
          "material-symbols/outlined.scss"
        ],
        "scripts": []

solution2: via scss:

set $material-symbols-font-path to 'material-symbols/' before importing material-symbols

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

I stumbled upon this solution while reading the docs (https://www.npmjs.com/package/material-symbols)

If you are getting errors with webpack or Vue CLI, add this line before importing: $material-symbols-font-path: '~material-symbols/';

I just had to remove "~" from the path. Don't know why, this was basically trial and error.

Tested with [email protected] and esbuild ("executor": "@angular-devkit/build-angular:application" so you need to undo your change to webpack (by using build-angular:browser))

Upvotes: 5

Related Questions