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

Ответить на тему

Автор

Сообщение

news_bot ^®

Стаж: 6 лет 9 месяцев
Сообщений: 27286

news_bot ^® написал(а)
13-Июн-2021 16:50

Цитировать

Как структурировать sass/scss файлы в проекте Angular? Однажды задавшись этим вопросом, нашел несколько вариантов.1 способ - держать все файлы стилей в папке /stylesВ это случае мы создаем все файлы в папке /styles, соблюдая примерную структуру:

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

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

Все файлы стилей в одном месте.
Ускоряется билдинг стилей.

Минусы:

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

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

Компоненты имеют свои файлы стилей.
Легче добиться чистой структуры файлов стилей.

Минусы:

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

3 способ (странный) - выносим все стили компонентов в единый файл, а глобальные в папку /stylesПохоже на первый вариант за исключением того что стили компонентов содержаться в одном файле а сам файл лежит в папке с компонентами.Плюсы:

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

Минусы:

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

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

Теги для поиска: #_css, #_angular, #_angular, #_scss, #_css, #_css, #_angular

Профиль ЛС

Ответить на тему

Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы

Текущее время: 22-Ноя 10:46
Часовой пояс: UTC + 5