Angular --prod проблема с border-top-left-radius и border-bottom-left-radius

Question

У меня проблема с border-top-left-radius и border-bottom-left-radius для кнопки, которая, кажется, работает в сборке разработки, но не в производстве.Когда я запускаю ng serve, я получаю ожидаемый результат:

Если я просто запускаю тот же проект с ng serve --prod, я получаю это:

... с некоторыми ошибками в инструментах разработчика:

По-видимому, система сборки не сделала хорошую работу.Что-то не сработало, так как стили не были правильно развернуты.Это легко воспроизвести с помощью Angular 6 и 7.

1. Создать пустое приложение, используя ng new test-app

2. Добавить кнопку в app.component.html

   TEST

3. Добавить CSS в app.component.css

   .ground-circle {border-radius: 50px! Важный;border-top-left-radius: 0! важный;border-bottom-left-radius: 0! важный;}

4. Я также использовал Bootstrap, но нет необходимости воспроизводить это.

Есть ли что-то очевидное, чего мне не хватает?

Answer 1

Он переопределяется классом под ним, который генерируется в режиме prod.

Снятие отметки с него в консоли разработчика, как я это сделал на изображении, приводит к правильному стилю, но для реального достижения этого попробуйте заменить свой класс CSS следующим образом:

.rounded-circle { border-radius: 0px 50px 50px 0px !important }

Answer 2

Попробуйте использовать эту команду ng serve --prod --build-optimizer=false.Это может решить вашу проблему.