错误无法找到导入 fontawesome scss 文件的 Angular 8 的“变量”

Question

我遵循了这些说明https://fontawesome.com/how-to-use/on-the-web/using-with/sass
我今天创建了这个项目，它非常干净。
这是我的文件夹结构：

src
|-- app
|   |-- app.component.css
|   |-- app.component.html
|   |-- app.component.spec.ts
|   |-- app.component.ts
|   -- app.module.ts
|-- assets
|   |-- .gitkeep
|   -- css
|       -- normalize.css
|-- environments
|   |-- environment.prod.ts
|   -- environment.ts
|-- favicon.ico
|-- fontawesome
|   |-- _animated.scss
|   |-- _bordered-pulled.scss
|   |-- _core.scss
|   |-- _fixed-width.scss
|   |-- _icons.scss
|   |-- _larger.scss
|   |-- _list.scss
|   |-- _mixins.scss
|   |-- _rotated-flipped.scss
|   |-- _screen-reader.scss
|   |-- _shims.scss
|   |-- _stacked.scss
|   |-- _variables.scss
|   |-- brands.scss
|   |-- fontawesome.scss
|   |-- regular.scss
|   |-- solid.scss
|   -- v4-shims.scss
|-- index.html
|-- main.ts
|-- polyfills.ts
|-- scss
|   -- _variables.scss
|-- styles.css
|-- test.ts
-- webfonts
    |-- fa-brands-400.eot
    |-- fa-brands-400.svg
    |-- fa-brands-400.ttf
    |-- fa-brands-400.woff
    |-- fa-brands-400.woff2
    |-- fa-regular-400.eot
    |-- fa-regular-400.svg
    |-- fa-regular-400.ttf
    |-- fa-regular-400.woff
    |-- fa-regular-400.woff2
    |-- fa-solid-900.eot
    |-- fa-solid-900.svg
    |-- fa-solid-900.ttf
    |-- fa-solid-900.woff
    -- fa-solid-900.woff2
7 directories, 49 files

app.component.css：

@import "../fontawesome/fontawesome.scss";
@import "../fontawesome/solid.scss";

但由于某种原因，我看到了一个奇怪的错误：

ERROR in ./src/app/app.component.css
Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: Failed to find 'variables'
  in [
    C:\Projects\music\src\fontawesome
  ]
    at C:\Projects\music\node_modules\postcss-import\lib\resolve-id.js:35:13
    at async Promise.all (index 0)
    at async Promise.all (index 0)

我尝试将 _variables.scss 的名称更改为 variables.css，但这很愚蠢，这不是问题 请帮忙

Answer 1

Here 是怎么做的。您是否按照此处所述更改了 webfont 路径：

打开项目的 scss/variables.scss 并编辑 $fa-font-path 变量指向您放置 webfonts 文件夹的位置。