在Angular应用程序中使用Sass/SCSS的简要指南

我在想，如何在Angular项目中构造预处理脚本语言Sass/SCSS文件，而且，事实证明有几种解决方案。

方法一

将所有的样式文件保存在/styles文件夹中

在这种情况下，我们通过遵循模式结构在/styles文件夹中创建所有文件。

Shell

styles 
	├── base 
	├── components
	└── xxxxx

以这种方式结构文件的流行方法之一是sass文档中建议的7-1模式。更多的细节可以在这里找到。

这种方法的优点：

1. 所有的样式文件都在一个地方

2. 风格构建变得更快

缺点：

1. 开发者必须知道所需文件的位置

2. 在一个大的项目中，文件结构可能会变得很混乱

方法二

将每个样式文件保留在组件中，并将全局样式添加到/Styles文件夹中。

在这种情况下，我们将组件的样式文件留在组件中，并将全局样式移到/styles。带有变量和混合元素的文件也被添加到/styles文件夹中，然后导入到组件的样式文件中。/styles文件夹看起来和第一种方法一样，但没有组件样式。

这种方法的优点：

1. 组件有自己的样式文件

2. 样式文件的结构更容易实现简洁

缺点：

1. 在一个大项目中，建立样式文件的速度会变慢

方法三

将所有组件的样式移到一个文件中，并将全局样式保留在/样式文件夹中

这个方法与第一种方法相似，只是组件的样式被包含在一个单独的文件中，存放在组件文件夹中。

这种方法的优点：

1. 组件有其单一的样式文件，可以被快速访问

2. 样式的建立比较快

缺点：

1. 你总是需要把通用的组件样式文件导入到新组件的样式文件中

在发现的三种方法中，第二种方法对于Angular应用程序似乎是最有效的。第一种更适用于没有框架的布局项目。第三种方法看起来比较奇怪，尽管它可能很方便。

谢谢你的时间，祝你有个愉快的一天!