Неверное значение свойства после развертывания в среде Prodction

Question

Я немного озадачен, почему это происходит в другой серверной среде.

У меня есть глобальный класс css, объявленный в моем style.scss в моем приложении Angular. Этот класс использовался на разных страницах с формой ввода данных.

.form-container ) > * { 
      width: 100%: 
      padding : 1.25rem !important 1.25rem; 
 }

Если вы видите, действительно, что-то не так со значением padding, где !important было помещено перед последним значением.

Ниже, как это выглядит, когда я проверяю его в инструменте разработки.

Предпроизводственный процесс

Производство

Как вы можете видеть, в Pre Production это был удар, благодаря которому отступы не применялись на моем веб-сайте, где я использовал указанный класс. Тем не менее, на другом фрагменте (Production) оно стало действительным значением, но последнее значение 1.25rem было опущено.

Я хотел бы знать, почему в Production не жалуется на значение padding, но в Pre Production это делает?

Я подозреваю, что это может быть чем-то, что нужно сделать при объединении приложения angular с использованием ng build --prod , НО не совсем понятно, почему это произошло.

ТИА!

Answer 1

!important всегда должен указываться в конце определения.

Приведенное ниже определение фактически недопустимо, поэтому браузер его игнорирует.

padding : 1.25rem !important 1.25rem; 

Принимая во внимание, что упаковщик / минификатор обнаруживает !important и называет его концом определения. Он работает, как и ожидалось.

Он поступает правильно, удаляя все, что находится за пределами маркера !important, чтобы сделать определение действительным.