Angular 6 + SASS 文件夹结构答案

【问题标题】：Angular 6 + SASS Folder StructureAngular 6 + SASS 文件夹结构
【发布时间】：2019-11-17 01:16:04
【问题描述】：

我们可以为大型项目（超过一页）维护的最佳文件夹结构是什么。我是 sass 和 angular 的初学者。请帮助我了解文件夹结构。

【问题讨论】：

这完全符合您的要求，但我建议您使用 Angular 标准指南，每个组件一个 sass 文件和一个全局级别的 Sass。

标签： angular sass angular6 directory-structure

【解决方案1】：

这是我对 Angular 解决方案结构良好、组织有序且可扩展的架构的看法：

- app
  - core
    - guards
    - interceptors
    - models
    - services [self-provide in root, hence no need for a CoreModule]
      - auth
      - http
      - storage
  - features
    - heroes
      - components [pure presentation components, get data from page attributes]
      - pages [routed components, get data from services, send to components via attributes]
      - services [if only used in this feature]
      - models [if only used in this feature]
      - heroes-routing.module.ts
      - heroes.module.ts
  - shared
    - components [footer, header, calendar, dropdowns etc.]
    - directives
    - pipes
    - validators
    - shared.modules.ts [require CommonModule, FormsModule etc.]
  - app-routing.module.ts
  - app.component.html
  - app.module.ts
- assets
  - fonts
  - i18n
  - icon
  - images

灵感参考Planning the Architecture of your Angular App, feb. 2019

【讨论】：

谢谢。它很有用。我将通过这个结构。
@JesúsLópez 我现在包括了答案的基本部分
@BjarneGerhardt-Pedersen，已删除评论

【解决方案2】：

您应该有一个全局 sass 文件，然后为您拥有的每个组件创建一个特定于组件的 sass 文件，以便您可以逐个组件自定义所需的样式组件。这样项目将整洁且易于维护。

【讨论】：