A note on options for organizing Sass / SCSS in an Angular application

How do I structure sass / scss files in an Angular project? Once asking this question, I found several options.

1 way - keep all style files in / styles folder

In this case, we create all the files in the folder /styles



, observing the approximate structure:

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

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

The pros of this approach:

1. All style files in one place.

   
   
   
   
   

2. Style building is accelerated.

   
   
   
   
   

Minuses:

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

   
   
   
   
   

2. .

   
   
   
   
   

2 - , /styles

, , /styles



. , . /styles



, , .

:

1. .

   
   
   
   
   

2. .

   
   
   
   
   

:

1. .

   
   
   
   
   

3 () - , /styles

.

:

1. .

   
   
   
   
   

2. .

   
   
   
   
   

:

1. , .

   
   
   
   
   

, Angular . . , .

Angular ?