角--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 中添加一个按钮

   测试

3. 将 CSS 添加到 app.component.css

   .rounded-circle { 边框半径：50px！重要； 边框左上角半径：0！重要； 边界左下角半径：0！重要； }

4. 我也使用了 Bootstrap，但没有必要重现。

我有什么明显的遗漏吗？

Answer 1

它被在 prod 模式下生成的类覆盖。

像我在图像中所做的那样在开发控制台中取消选中它会产生正确的样式，但要真正实现，请尝试用以下代码替换您的 CSS 类：

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

Answer 2

尝试使用此命令ng serve --prod --build-optimizer=false。它可能会解决您的问题。