Z-index содержит # в CSS

Я недавно обновился с angular 10 до 12.

Использую SCSS.

После обновления я заметил, что мой логотип скрывается за содержимым, и все мои значения z-index добавлены # к значениям, и я не знаю причину, по которой и не могу найти никакой хорошей информации о том, откуда это изменение или что причина.

Ничего не изменилось в моих файлах конфигурации или конвейерах сборки, кроме обновлений src package.json для пакетов

Я также использую угловой материал в качестве библиотеки компонентов пользовательского интерфейса и дополнительно импортировал модуль интервала начальной загрузки.

Я знаю, что CSS недействителен. (после сборки). Он действителен во время разработки, но после сборки во время выполнения к нему по какой-либо причине добавляется хэштег.

До обновлений этого не было.

Вот время проектирования

Это какая-то новая угловая функция, которую мне здесь не хватает. Не могу найти ничего подходящего в документации.

Это связано с Айви?

Редактировать:

Я считаю, что это может быть связано с недавними изменениями в sass API, переходящими от операторов @import к @use. ng update команда должна (согласно документам) обновлять и реорганизовывать scss для меня, но это не так.

Как только я закончу рефакторинг, если он решит проблему, я отправлю его в качестве ответа здесь

3 ответа

Решение

Обновите Angular до последней доступной версии. У меня была такая же проблема с 12.0.1 после ng update (12.0.5) проблема исправлена.

Проверьте, наследует ли он z-index от родительского класса. Если это так, поместите его за пределы родительского класса.

Причина, по которой это не работает, - [недопустимое значение свойства]. Вы должны удалить сигнал # из значения свойства. Как это:

         z-index: 100

Пожалуйста, дайте мне знать, работает это или нет.

Спасибо

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