Ошибка сборки ng: ошибка sass: null не является цветом

Я работаю над проектом, который теперь обновляется до angular 15, и при попытке настроить тестовую среду сборка / запуск выдает эту ошибку для того, что кажется связанным с материалом, темами и sass. это также, кажется, связано с индикатором выполнения. вот что я получаю: `

./src/theme/styles.scss?ngGlobalStyle - Error: Module build failed (from ../../node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ../../node_modules/sass-loader/dist/cjs.js):
SassError: $color: null is not a color.
   ╷
16 │     track-color: color.adjust(mdc-theme-color.prop-value($color), $alpha: -0.75),
   │                  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  ../../node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 16:18  -palette-styles()
  ../../node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 28:7   @content
  ../../node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 176:5     @content
  ../../node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 216:3     disable-mdc-fallback-declarations()
  ../../node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 175:3     using-mdc-theme()
  ../../node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 26:3   color()
  ../../node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 53:7   @content
  ../../node_modules/@angular/material/core/theming/_theming.scss 402:3             private-check-duplicate-theme-styles()
  ../../node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 47:3   theme()
  ../../node_modules/@angular/material/core/theming/_all-theme.scss 47:5            @content
  ../../node_modules/@angular/material/core/theming/_theming.scss 402:3             private-check-duplicate-theme-styles()
  ../../node_modules/@angular/material/core/theming/_all-theme.scss 44:3            all-component-themes()
  ../../node_modules/@angular/material/core/color/_all-color.scss 15:3              all-component-colors()
  src/theme/styles.scss 49:3                                                        root stylesheet

`

Как мне начать с этого? извините за низкое описание, если кто-то поможет мне получить дополнительную информацию, если это будет здорово.

Я попытался обновиться до angular 15 и запустить локальную тестовую среду с помощью ng build или ng start, но он застрял на этом.

У меня есть это в styles.scss:

@include mat.all-component-colors($myapp-theme); // Progress bars don't work without this

И это в файле variable.scss:

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

Что должно быть связано.

Любое руководство будет очень признательно.

* с использованием узла 16 npm 8 и углового 15.

Удалите папку node_module и снова выполните установку npm, убедитесь, что вы используете правильную версию узла.

Sabir Hossain 21.11.2022 15:59

Я попробовал это снова сейчас, но это продолжается. версии node и npm соответствуют требованиям приложения. и я не получаю никаких ошибок относительно узла.

A-B 21.11.2022 16:06

Я думаю, мне нужно импортировать или изменить текущий импорт угловой/материальной вещи.

A-B 21.11.2022 16:09
Улучшение генерации файлов Angular
Улучшение генерации файлов Angular
Angular - это фреймворк. Вы можете создать практически любое приложение без использования сторонних библиотек.
Еженедельник новостей для разработчиков - выпуск №10
Еженедельник новостей для разработчиков - выпуск №10
В выпуске этой недели собраны самые интересные статьи и новости, отобранные из всего контента, опубликованного за предыдущую неделю на сайте...
Для развертывания Сайтов с использованием Blazor, Angular и React с репозиторием на GitHub на Cloudflare.
Для развертывания Сайтов с использованием Blazor, Angular и React с репозиторием на GitHub на Cloudflare.
Как развернуть сайты с помощью Blazor, Angular и React с репозиторием на GitHub на Cloudflare.
Шаблоны Angular PrimeNg
Шаблоны Angular PrimeNg
Как привнести проверку типов в наши шаблоны Angular, использующие компоненты библиотеки PrimeNg, и настроить их отображение с помощью встроенной...
Promise и Observables в Angular
Promise и Observables в Angular
Здесь мы рассмотрим основные различия между обещаниями и наблюдаемыми таблицами на примере.
Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?
Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?
D3.js - это обширная библиотека, используемая для привязки произвольных данных к объектной модели документа (DOM). Мы разберем основные варианты...
1
3
257
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проблема заключается в слегка измененном синтаксисе angular 15. Сначала мне нужно было import '@angular/material' as mat, а затем мне нужно было настроить новые свойства mat, чтобы использовать синтаксис mdc, например, для кнопки/цвета.

Я использовал угловую документацию для этого исправления. удачи будущим стикерам.

В моем случае их было несколько @include mat.all-component-themes Пришлось удалить и просто применить тему куда нужно, в моем случае прогресс-бар-цвет @include mat.progress-bar-color. Готово проверить новые документы по темам material.angular.io/guide/theming

Diego Ortiz 13.01.2023 06:02

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