最佳实践Angular和Sass文件结构

Question

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

我看到有3个选项。

---

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

styles
    ├── base
    ├── components
    └── xxxx

专业人士：
 -将样式文件放在同一文件夹中。
 -轻松快速地构建sass。

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

---

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

专业人士：
组件的文件夹中有其样式文件。
轻松快速地构建sass。
更容易获得干净的文件结构。
骗子：
每次有一个新组件时，_components.scss文件都必须使用长文件路径进行更新。

---

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

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

---

这里的最佳做法是什么？

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

Answer 1

我也搜索了您所问的相同问题，然后得出结论，根据您的问题采用具有 2nd 和 3rd 的结构的某种混合形式

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

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

在下面，我附上了我的SASS文件夹的屏幕截图。

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

Answer 2

您应将全局文件保留在angular工作区的根目录中，以便可以在angular工作区中的所有应用程序之间共享它。这可以是部分文件，可以在整个应用程序中应用。

并且还具有特定于组件的css / scss文件，它们分别位于组件文件夹本身。

例如，登录组件可以在其login.component.scss文件中使用其本地化样式。

Answer 3

我将您在课题中提到的第二种方法和第三种方法混合使用。 这是我的无礼-或AKA风格-文件夹：

然后我将它们导入styles.scss

我喜欢保持样式尽可能全局化，以避免组件样式化，因为我发现事情很快就会变得非常混乱。

经过大量重组后，我联系了这个组织。