angular - Angular + material sass：风格有时是错误的

Question

我的应用程序出现了一些奇怪的情况：大多数情况下，样式是 100% 功能性和预期的，有时（似乎是随机的）它没有完全加载。某些高度、宽度、边距和填充是错误的。

很奇怪的是我没有错误，我找不到发生这种情况的原因。有一天我可以工作几个小时而从未看到这个故障，然后第二天，我又看到了好几次。

无论如何，按 F5 重新加载页面可以解决问题，这让我认为这更像是一个加载问题，但我不确定。

我正在开发一个基于 en JHipster 的应用程序，包括 Angular、Material 和 sass。

角.json

"schematics": {
    "@schematics/angular:component": {
        "inlineStyle": true,
        "inlineTemplate": false,
        "spec": false,
        "prefix": "jhi",
        "styleExt": "scss"
     },

我有一个文件 global.scss ，其中包括一些其他文件：

全局.scss

@import './theme.scss';

@import './utils/backgrounds.scss';
@import './utils/borders.scss';
@import './utils/buttons.scss';
@import './utils/cards.scss';
@import './utils/display.scss';
@import './utils/margin.scss';
@import './utils/modal.scss';
@import './utils/padding.scss';
@import './utils/position.scss';
@import './utils/size.scss';
@import './utils/text.scss';
@import './utils/input.scss';

由于它在大多数情况下都可以正常工作，因此我的猜测是这些文件中没有错误。但我可能确实错过了一些东西。

它发生在 Firefox、Chrome、Opera、Safari 上，所以我认为浏览器不是问题。

如果您需要更多代码或其他任何内容，请告诉我。

编辑1：我实际上想知道是否可能是我在一个页面中覆盖了一些材料元素，并在另一个页面中以不同的方式覆盖它们。

标签： angularsassangular-materialjhipster