最佳实践Angular和Sass文件结构

Question

您将如何在Angular项目中构造sass文件？

如我所见，有3个选项。

---

1.从组件文件夹中删除所有sass文件（和样式），并使所有文件处于“常规” sass结构中，即样式文件夹。

styles
    ??? base
    ??? components
    ??? xxxx

专业版：
-Alle样式文件位于同一文件夹中。
-轻松快速地构建无礼。

缺点：
-开发人员必须寻找正确的文件。
-文件结构可能变得更混乱。

---

2.将sass文件保留在组件中。在其他所有内容上保持正常的sass结构。Styles文件夹看起来与上面相同，但没有组件样式。具有用于组件的文件部分文件，以从不同的项目组件收集组件样式。

优点：
组件的文件夹中有其样式文件。
轻松快速地构建sass。
更容易获得干净的文件结构。 缺点
：
每次有新组件时，_components.scss文件必须使用长文件路径进行更新。

---

3.将sass文件保留在组件中，并用角度编译sass。

优点：
组件的文件夹中有其样式文件。
更容易获得干净的文件结构。
缺点：
需要更长的时间来构建和测试。
至少要有两个样式文件，因为我们仍然需要全局样式等。

---

最佳做法是什么？

抱歉-很难解释这一点，但希望您能够理解问题所在:)

Answer 1

我也已经搜索过与您提出的问题相同的问题，然后得出一个结论，以便根据您的问题采用具有第二 和第三结构的混合结构。

因此，根据我对SASS有角度的项目的结构化研究（使代码尽可能模块化），您可以将特定于组件的 CSS 保留在.html, .ts文件所在的组件文件夹本身中。

但是对于avatar-block可能在各种组件中使用的可重用组件（例如），可以有一个单独的部分文件。

下面是我的SASS文件夹的屏幕快照。

与component和helper文件夹类似，您可以拥有layout文件夹，其中将包含您的布局特定的SCSS局部。您的其余部分SCSS可以包含在特定于角度组件的SCSS文件中，例如：- login.component.scss可以根据需要包含用于登录组件布局，边框，边距，位置等的SCSS。

PS- 如果您也在寻找Angular的最佳目录结构？请在这里查看。