Заметка о вариантах организации Sass/SCSS в Angular приложении

K

Kate

Administrator
Команда форума
Как структурировать 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 приложения. Первый скорее подойдет для проектов с версткой без фреймворков. Третий способ выглядит довольно странным, хотя возможно и реально может принести удобство.

Источник статьи: https://habr.com/ru/post/562556/
 
Войдите или зарегистрируйтесь для ответа.
Сверху