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

   <button class="btn btn-primary rounded-circle">测试</button>

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

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

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

我有什么明显的遗漏吗？

标签： cssangular

Answer 1

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

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

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