Тестовое задание на Angular. Настройка базовых стилей и Angular Material

Aleksandr Serenko

Published in

F.A.F.N.U.R

3 min readJul 5, 2021

В данной статье подключим Angular Material, а также создадим глобальные стили.

При выборе дизайна и UI стоит учитывать следующие нюансы.

В Angular чаще всего не принято использовать внешние наборы компонентов, за исключением Angular Material. Обычно это связано с тем, что разработчику проще и быстрее создать свой UI kit, чем пытаться разобраться со сторонним решением.

При использовании готовых ui kit’ов нужно понимать кто их поддерживает, а также понимать их реализацию.

Создание своих аксессоров на элементы формы долго, поэтому возьмем Angular Material в качестве основного UI. Для тестового задания, это будет более чем достаточно.

А так как его разрабатывает Angular team, то всегда можно сослаться на них, мол, они плохого не посоветуют.

Добавим Angular Material:

ng add @angular/material

CLI добавит необходимые стили в style.scss.

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

Создадим новую папку stylesheets, где разместим common стили.

Создадим файл materail-theme.scss и перенесем сгененированный код:

В Angular 12:

Так как статья уже немного устарела за один месяц во время написания, то оставляю и предыдущий вариант для Angular < 12

В Angular < 12:

Так как браузеры по умолчанию имеют разные стили, приведем их к единому стилю, добавив normalize.scss:

Определим глобальные стили внутри приложения в global.scss, где укажем шрифт и размер шрифта для всех компонентов, а также ряд фиксов для корректной работы margin/pagging:

На основании темы Material, определим переменные в variables.scss:

Angular < 12:

Для реализации адаптивности, украдем миксин у bootsrap brackpoints.scss:

И в конце создадим файл utils.scss, который будет содержать все переменные и миксины:

После того, как была создана основная структура CSS, подключим все в styles.scss Angular приложения:

@import 'variables';
@import 'mixins/brackpoints';

Angular < 12:

Как видно из примера, мы используем пути относительно проекта. Для сборки это является наиболее оптимальным решением, так как дает ясность откуда берутся стили. Так как angular builder может брать стили из множества мест, данный подход немного упрощает поддержку.