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

Posted 2023-03-07

技术标签:

【中文标题】Ionic 4 + Angular 6 PWA 样式不起作用/损坏【英文标题】：Ionic 4 + Angular 6 PWA Styles not working / broken 【发布时间】：2019-03-08 16:07:06 【问题描述】：

希望有人可以帮助我，

我有一个使用 Angular 6 pwa 的 Ionic 4 应用程序。我已按照本文中的步骤进行操作

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 下面的例子sn-p

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:10pxapp-family-visit[_ngcontent-%COMP%]   .visit-details-family-view[_ngcontent-%COMP%]   #title[_ngcontent-%COMP%]margin-bottom:20pxapp-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%] 标记内联

【问题讨论】：

这个选择器是否正确：app-[my-contol] from my-controll.component.scss:?也许你想要:host 代替？抱歉，这只是一个在组件级别显示 scss 的占位符，正如我在帖子中所说，如果我不执行 pwa（例如 --prod build），所有这些样式都可以正常工作。现在已经改变了这个嗯，这可能是 ionic 构建过程的问题...也许在 github 上打开一个问题并将其链接到此处？创建了这个错误报告github.com/ionic-team/ionic/issues/15840 【参考方案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 团队发一些帖子。

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

【讨论】：

【参考方案2】：

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