Как структурировать sass/scss файлы в проекте Angular? Однажды задавшись этим вопросом, нашел несколько вариантов.

1 способ - держать все файлы стилей в папке /styles

В это случае мы создаем все файлы в папке /styles, соблюдая примерную структуру:

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

Одним из популярных способов, при таком структурировании файлов, может являться паттерн 7-1, предлагаемый в документации к sass. Подробнее можно ознакомиться тут по ссылке.

Плюсы такого подхода:

1. Все файлы стилей в одном месте.

2. Ускоряется билдинг стилей.

Минусы:

1. Разработчик должен представлять где должен находится нужный файл.

2. Файловая структура может стать грязной при большом проекте.

2 способ - держать каждый файл стиля в компоненте, а глобальные в папке /styles

В этом варианте, оставляем файлы стилей компонента к каждом компоненте а глобальные стили, выносим в /styles. Туда же выносим файлы с переменными и миксинами, которые потом импортируем в файлы стилей компонентов. Папка /styles выглядеть так же, как в первом способе, но без стилей компонентов.

Плюсы такого подхода:

1. Компоненты имеют свои файлы стилей.

2. Легче добиться чистой структуры файлов стилей.

Минусы:

1. Билдинг файлов стилей может замедлиться при большом проекте.

3 способ (странный) - выносим все стили компонентов в единый файл, а глобальные в папку /styles

Похоже на первый вариант за исключением того что стили компонентов содержаться в одном файле а сам файл лежит в папке с компонентами.

Плюсы:

1. Компоненты имеют свой единый файл стилей что обеспечивает быстрый доступ.

2. Билдинг стилей происходит быстрее.

Минусы:

1. Необходимо каждый раз добавлять импорт общего файла стилей компонентов, в файл стилей нового компонента.

Из трех найденных вариантов, второй выглядит более рациональным для Angular приложения. Первый скорее подойдет для проектов с версткой без фреймворков. Третий способ выглядит довольно странным, хотя возможно и реально может принести удобство.

А как вы организуете файлы стилей в Angular проектах?