Angular Material styling is imported as 'mat'

В 2019 году Sass представил новую модульную систему, включающую миграцию с @import на @use. Переключившись на синтаксис @use, мы можем определить, какой CSS не используется, и уменьшить размер скомпилированного файла CSS. Это делает невозможным непреднамеренное включение транзитивных зависимостей. Каждый модуль включается только один раз, независимо от того, сколько раз загружались стили.
Angular Material v12 включает переход от использования @import к @use. Такой рефакторинг нашей тематики API легче читать и понимать, что помогает разработчикам лучше использовать преимущества новой модульной системы. Эта миграция происходит в скриптах, включенных в ng update. Одним из примеров такого изменения является то, как мы определяем тему Angular Material:
JavaScript

1 2 3 4

// Angular Material styling is imported as 'mat'. @use '@angular/material' as mat;// 'mat' namespace is referenced. $my-primary: mat.define-palette(mat.$indigo-palette, 500); $my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

Мы используем введение пространств имен для определения ядра ‘@angular/material’ as mat, а затем получаем доступ к переменным, таким как mat.$indigo-palette. Если углубимся в исходный код, мы можем определить, какие переменные аннотированны как @forward для общего доступа, чтобы предоставить пользователям более чистый стиль.
Ознакомьтесь с недавно переписанной документацией по Angular Material theming, чтобы узнать, как миграция на @use упростит тематизацию ваших компонентов.

Включение современных концепций CSS

Angular v13 удалил поддержку IE11, что позволило ему использовать современные веб-стили, такие как CSS Grid, логические свойства CSS, CSS calc(), ::hover и многое другое! Вы можете ожидать, что библиотека Angular Material начнет использовать эти функции, и мы также рекомендуем вам это сделать.