Ionic 4 + Angular 6 PWA 样式不工作/损坏

Question

希望有人能帮助我，

我有一个使用 Angular 6 pwa 的 Ionic 4 应用程序。我已按照此 post 中的步骤使其正常工作

https://www.joshmorony.com/create-a-pwa-with-angular-service-workers-in-ionic-4/

所有步骤都很好地完成，并且包构建和运行正确无误。

但是我的所有控件特定样式都丢失了，例如

my-controll.component.scss

  app-my-contol {

      ion-content {
        background-color: var(--light-gray-lightest);
      }
      .my-class {
        padding:0;
        list-style: none;
        position: absolute;
        width: 100%;
        left: 0;
    }
}

您可以看到文件已正确散列，并且我没有 404 提示任何文件丢失。在没有 --prod 的情况下执行正常的 ionic cordova build 将使样式再次起作用。

如有任何帮助，我们将不胜感激！

编辑 -- 快速更新。

所以缺少的样式似乎在 main_xxxxxxxxx.js 下面的示例片段

var z = r.La({
            encapsulation: 0,
            styles: [["app-family-visit[_ngcontent-%COMP%]   .visit-details-family-view[_ngcontent-%COMP%]{margin-top:20px}@media (max-width:480px){app-family-visit[_ngcontent-%COMP%]   .visit-details-family-view[_ngcontent-%COMP%]{margin-top:10px}}app-family-visit[_ngcontent-%COMP%]   .visit-details-family-view[_ngcontent-%COMP%]   #title[_ngcontent-%COMP%]{margin-bottom:20px}app-family-visit[_ngcontent-%COMP%]   .datetime-md[_ngcontent-%COMP%]{padding-left:0}.verification_page[_ngcontent-%COMP%]{padding-top:15px}"]],
            data: {}
        });

正在加载此文件，但由于某种原因被忽略

另一个更新

有趣的是，在非 pwa 构建中它在 main.js

中看起来像这样

/*!****************************************************************!*\
  !*** ./src/app/case/pages/family-visit/family-visit.page.scss ***!
  \****************************************************************/
/*! no static exports found */
/***/ (function(module, exports) {

module.exports = "app-family-visit .visit-details-family-view {\n  margin-top: 20px; }\n  @media (max-width: 480px) {\n    app-family-visit .visit-details-family-view {\n      margin-top: 10px; } }\n  app-family-visit .visit-details-family-view #title {\n    margin-bottom: 20px; }\n  app-family-visit .datetime-md {\n  padding-left: 0; }\n  .verification_page {\n  padding-top: 15px; }\n"

/***/ }),

所以 pwa 构建添加这些 [_ngcontent-%COMP%] 内联标记

Answer 1

因此在这方面取得了一些进展，现在我将回答我自己的问题。

似乎是 scss 文件中元素选择器的问题

所以如果我有这样的 scss

app-visit {
  .visit-details {
    margin-top: 20px;

    @include mobile-only {
      margin-top: 10px;
    }
  }
  .email-share {
    margin-top: 15px;
  }
  .hidden-email {
    display: none;
    &.active {
      display: block;
    }
    .side-content
    {
      border-left: 1px solid gray;
    }
  }
}

PWA 构建未能包含该组件的样式

如果我删除 app-visit 包装器，那么它可以在 PWA 构建上运行！

我猜这里有一个我不明白的更深层次的问题，但我会与 Ionic 和 Angular 团队一起发表一些帖子。

但如果您遇到这种情况，那么目前这是一个很好的解决方法

Answer 2

从 Ionic 4 和 Angular6 开始，您必须删除页面/组件标签。请参阅迁移到 Ionic 4 -> https://beta.ionicframework.com/docs/building/migration/#overview

Page/component Sass should no longer be wrapped in the page/component tag and should use Angular's styleUrls option of the @Component decorator

所以这不是错误，一切都按预期工作！所以请阅读迁移指南并删除包装器，一切都应该再次工作

Ionic 4 + Angular 6 PWA 样式不工作/损坏

Ionic 4 + Angular 6 PWA Styles not working / broken

sass

typescript

ionic4

angular6