Angular 6 + SASS 文件夹结构

Question

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

Answer 1

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

Answer 2

以下是我为 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

Angular 6 + SASS 文件夹结构

Angular 6 + SASS Folder Structure

directory-structure

sass

angular

angular6