最佳实践 Angular 和 Sass 文件结构答案

【问题标题】：Best practice Angular and Sass file structure最佳实践 Angular 和 Sass 文件结构
【发布时间】：2019-01-19 23:07:58
【问题描述】：

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

在我看来，有 3 个选项。

1。从组件文件夹中删除所有 sass 文件（和样式），并将所有文件放在“正常”的 sass 结构中，即样式文件夹。

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

专业版：
- 同一文件夹中的所有样式文件。
- 轻松快速地构建 sass。

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

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

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

3。将 sass 文件保存在组件中并让 angular 编译 sass。

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

这里的最佳做法是什么？

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

【问题讨论】：

标签： angular sass

【解决方案1】：

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

然后我将它们导入到 styles.scss

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

经过多次重组后，我联系了这个组织。

【讨论】：

【解决方案2】：

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

因此，根据我对 Angular 项目中 SASS 结构的研究，以使代码尽可能模块化，您可以保留 component-specific CSS .html, .ts 文件所在的组件文件夹本身。

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

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

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

PS- 如果您也在寻找 Angular 的最佳目录结构？请check it out here。

【讨论】：

【解决方案3】：

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

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

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

【讨论】：