Как изменить код, чтобы использовать @use вместо @import

В настоящее время я переделываю приложение клубов с Angular 9 на 18, поскольку оно не поддерживается должным образом. Я стараюсь сохранить как можно большую часть интерфейса и поэтому хочу сохранить более или менее тот же дизайн.

Я нашел следующий код, определяющий темы нашего приложения в этом коде:

@import '~@angular/material/theming';
@include mat-core();
$my-app-primary: mat-palette($material-primary);
$my-app-accent:  mat-palette($mat-pink, 500, 900, A100);
$my-app-warn:    mat-palette($mat-red);
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
@include angular-material-theme($my-app-theme);

Его можно найти в файле colours.scss, на который есть ссылка в файле styles.scss нашего старого приложения. Я хотел сохранить все это нетронутым, но с момента выхода Angular 17 использование @import больше невозможно, и я должен использовать @use (как в этом билете: https://github.com/angular/comComponents/issues /28204)

Я попробовал изменить код сам и с помощью ChatGPT получилось следующее:

@use '@angular/material' as mat;
    
@include mat.core();
    
$my-app-primary: mat.define-palette(mat.$indigo-palette);
$my-app-accent: mat.define-palette(mat.$pink-palette, 500, 900, 'A100');
$my-app-warn: mat.define-palette(mat.$red-palette);
    
$my-app-theme: mat.define-light-theme((
  color: (
    primary: $my-app-primary,
    accent: $my-app-accent,
    warn: $my-app-warn,
  )
));
    
@include mat.all-component-themes($my-app-theme);

К сожалению, это не работает, и я получаю следующую ошибку:

Unknown Function: 'define-palete' ...

Кто-нибудь знает, каков правильный синтаксис? Даже руководства, предоставленные Angular, по-прежнему ссылаются на старую систему: https://v7.material.angular.io/guide/theming

Вы получаете эти ошибки в Angular 9 или Angular 17?

JSON Derulo 03.08.2024 08:20

Вы ссылаетесь на страницу архивной документации. Вот последняя версия той же страницы.

Pieterjan 03.08.2024 09:35

Какую версию Angular Material @angular/material вы используете? Обратите внимание, что в версии 18 произошло много критических изменений из-за перехода на Материал 3. Одно из них define-palette больше не существует: github.com/angular/comComponents/pull/28892 См. также обновленную документацию по темам цветов материала. .angular.io/guide/theming#customizing-your-colors

davidlj95 03.08.2024 13:02

@JSONDerulo в Angular 18 с Материалами 3

Nietzsche 03.08.2024 15:49
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
3
4
79
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ваше приложение Angular 9 использует Material 2, который больше не используется по умолчанию. Вот правильный синтаксис для Angular Material 18 с использованием Материала 3:

@use '@angular/material' as mat;

@include mat.core();

$my-theme: mat.define-theme((
  color: (
  theme-type: light,
  primary: mat.$violet-palette,
  )
));

html {
  @include mat.all-component-themes($my-theme);
}

Это может помочь, должен работать с Angular Material 18:

@use '@angular/material' as mat;

@include mat.core();

$my-app-primary: mat.define-palette(mat.$indigo-palette);
$my-app-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$my-app-warn: mat.define-palette(mat.$red-palette);

$my-app-theme: mat.define-light-theme((
  color: (
    primary: $my-app-primary,
    accent: $my-app-accent,
    warn: $my-app-warn,
  )
));

@include mat.all-component-themes($my-app-theme);

Ключевые изменения и пояснения:

  1. Мы используем @use '@angular/material' as mat; для импорта стилей материалов и присваиваем им пространство имен mat.

  2. В определениях палитр используется mat.define-palette(), а доступ к предопределенным палитрам осуществляется через mat.$color-palette.

  3. Для акцентной палитры я использовал стандартные рекомендации Material Design для акцентных цветов (A200, A100, A400). При необходимости вы можете их отрегулировать.

  4. Тема определяется с помощью mat.define-light-theme() со структурой объекта для лучшей читаемости и возможности расширения в будущем.

  5. Наконец, мы включаем все темы компонентов с помощью mat.all-component-themes($my-app-theme).

Дополнительные соображения:

  • Если вы используете пользовательские цвета, вам может потребоваться определить пользовательские палитры. Например:

    $custom-primary: (
      50: #e8eaf6,
      100: #c5cae9,
      // ... other shades
      500: #3f51b5,  // main shade
      // ... continue with other shades
      contrast: (
        50: rgba(black, 0.87),
        100: rgba(black, 0.87),
        // ... other contrasts
      )
    );
    $my-app-primary: mat.define-palette($custom-primary);
    

Вы уверены, что mat.define-palete() существует для Материала 3? Я могу найти только mat.m2-define-palete.

Nietzsche 03.08.2024 15:44
Ответ принят как подходящий

В Angular 18 с темой M3 функции define-palette() больше нет. Чтобы создать палитру M2, используйте mat.m2-define-palette(). Если вы хотите создать собственную тему M3, используйте схему создания пользовательской темы:

ng generate @angular/material:m3-theme

Другие вопросы по теме