最佳实践角和Sass文件结构

Question

如何在一个角度的项目中构造sass文件？

在我看来，有三种选择。

1. 从组件文件夹中删除所有sass文件(和样式)，并将所有文件置于“普通”sass结构(即样式文件夹)中。

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

专业：

• 对同一文件夹中的文件进行样式化。
• 容易，快速建立sass。

Con：

• 开发人员必须寻找正确的文件。
• 文件结构会变得更加混乱。

1. 将sass文件保存在组件中。其他一切都要保持正常的sass结构。“样式”文件夹看起来与上面相同，但没有组件样式。为组件创建一个文件部分文件，以收集来自不同项目组件的组件样式。

专业：

组件的文件夹中有它们的样式文件。

容易，快速建立sass。

更容易获得一个干净的文件结构。

Con：

每次出现新组件时，_components.scss文件都必须使用长文件路径进行更新。

1. 将sass文件保存在组件中，并让sass进行角度编译。

专业：

组件的文件夹中有它们的样式文件。

更容易获得一个干净的文件结构。

Con：

构建和测试需要更长的时间。

最后至少有两个样式文件，因为我们仍然需要全局样式等。

这里的最佳做法是什么？

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

Answer 1

我也搜索了你问过的同样的问题，然后得出结论，根据你的问题，采用2和3的混合结构。

因此，根据我在一个角度项目中对component-specific SASS结构的研究，它可以使代码与模块化一样多，您可以将 CSS保存在.html, .ts文件所在的组件文件夹中。

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

下面是，我正在附上我的SASS文件夹的屏幕截图.

​

​

类似于组件和助手文件夹，您也可以拥有布局文件夹，该文件夹还将包含特定于布局的SCSS部件。其余的SCSS可以包括在您的角度组件-特定的SCSS文件例如：- login.component.scss可以包含SCSS登录组件布局，边界，边缘，位置等，根据您的需要。

PS- ，如果你也在寻找最佳的目录结构的话？请看看这里.

Answer 2

您应该将全局文件保存在角工作区的根级，以便在角工作区中的应用程序之间共享它。这可以是可以适用于整个应用程序的部分文件。

​

​

并且也有组件特定的css/scss文件，各自的组件文件夹本身。

​

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

Answer 3

我混合了你在问题中提到的第二种和第三种方法。这是我的sass -或AKA风格-文件夹：

​

​

然后将它们导入到styles.scss中。

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

经过多次改组，我向这个组织伸出了手。