Angular 应用程序和组件的 Scss 结构

Question

使用 ng serve 为我的应用提供服务时出现错误。页脚中的 scss 文件引用了 assets 中的 styles.css。但是，一些 scss 文件使用相对路径从图标中引用 svg，例如 assets/styles/styles.css 中的 background(../icons/icon.svg)。当此文件由 footer.component.scss 导入时，路径会中断。它正在尝试引用该文件夹中不存在但存在于 src/assets/icons 下的 src/app/layouts/icons/icon.svg。

├── app
|   ├── layouts
|       |──footer
|           ├── footer.component.ts
|           ├── footer.component.scss
|   
├── assets
|    ├── icons
|    ├── css
|        |──pallette.scss
|        |──_helpers.scss
|        |──styles.scss

我想要实现的目标是拥有一个模块化应用程序，其中包含可以为其他项目共享的组件等。可能有完全不同的结构和方法可以做到这一点，我愿意接受所有建议。

Answer 1

../icons/icon.svg 不是正确的道路。

尝试使用/assets/icons/icon.svg，它应该可以工作。