Как структурировать sass/scss файлы в проекте Angular? Однажды задавшись этим вопросом, нашел несколько вариантов.
1 способ - держать все файлы стилей в папке /styles
В это случае мы создаем все файлы в папке /styles,
соблюдая примерную структуру:
styles base components xxxxx
Одним из популярных способов, при таком структурировании файлов, может являться паттерн 7-1, предлагаемый в документации к sass. Подробнее можно ознакомиться тут по ссылке.
Плюсы такого подхода:
-
Все файлы стилей в одном месте.
-
Ускоряется билдинг стилей.
Минусы:
-
Разработчик должен представлять где должен находится нужный файл.
-
Файловая структура может стать грязной при большом проекте.
2 способ - держать каждый файл стиля в компоненте, а глобальные в папке /styles
В этом варианте, оставляем файлы стилей компонента к каждом
компоненте а глобальные стили, выносим в /styles. Туда
же выносим файлы с переменными и миксинами, которые потом
импортируем в файлы стилей компонентов. Папка /styles
выглядеть так же, как в первом способе, но без стилей
компонентов.
Плюсы такого подхода:
-
Компоненты имеют свои файлы стилей.
-
Легче добиться чистой структуры файлов стилей.
Минусы:
-
Билдинг файлов стилей может замедлиться при большом проекте.
3 способ (странный) - выносим все стили компонентов в единый файл, а глобальные в папку /styles
Похоже на первый вариант за исключением того что стили компонентов содержаться в одном файле а сам файл лежит в папке с компонентами.
Плюсы:
-
Компоненты имеют свой единый файл стилей что обеспечивает быстрый доступ.
-
Билдинг стилей происходит быстрее.
Минусы:
-
Необходимо каждый раз добавлять импорт общего файла стилей компонентов, в файл стилей нового компонента.
Из трех найденных вариантов, второй выглядит более рациональным для Angular приложения. Первый скорее подойдет для проектов с версткой без фреймворков. Третий способ выглядит довольно странным, хотя возможно и реально может принести удобство.
А как вы организуете файлы стилей в Angular проектах?
