A Brief Guide to Using Sass/SCSS in an Angular App

Method 1

To Keep All Style Files in the /Styles Folder

In this case, we create all files in the /styles folder by following a pattern structure:

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

One of the popular methods to structure files in this way is the 7-1 pattern suggested in the sass documentation. More details can be found here.

The Pros of This Approach:

1. All style files are in one place.

2. Style building becomes faster.

Cons:

1. The developer must know where the required file should be located.

2. The file structure may get messy in a large project.

Method 2

To Keep Each Style File in the Component and Add Global Styles to the /Styles Folder

In this case, we leave component style files in components and move global styles to /styles. Files with variables and mixins are also added to the /styles folder and then imported into the component style files. The /styles folder looks the same as in the first method but has no component styles.

The Pros of This Approach:

1. Components have their style files.

2. It is easier to achieve a clean structure for style files.

Cons:

1. Building style files can get slower in a large project.

Method 3

To Move All Component Styles to a Single File and Keep Global Styles in the /Styles Folder

It looks like the first method except that component styles are contained in a single file that is stored in the components folder.

The Pros of This Approach:

1. Components have their single style file which can be quickly accessed.

2. Style building is faster.

Cons:

1. You always need to import the common component style file into the style file of a new component.

Of the three methods found, the second one seems to be the most effective for an Angular application. The first one is more suitable for layout projects without frameworks. The third method looks rather strange, although it may be convenient.

Thank you for your time, and have a nice day!