Ionic 4 + Angular 6 PWA Стили не работают / сломаны

Question

Надеюсь, кто-нибудь может мне помочь,

У меня есть приложение Ionic 4, использующее Angular 6 pwa.Я следовал инструкциям, приведенным в этом сообщении, чтобы заставить его работать

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, чтобы предположить, что какие-либо файлы отсутствуют.Выполнение обычного ionic cordova build без --prod снова заставит стили работать.

Любая помощь будет принята с благодарностью!

Редактировать - быстрое обновление.

Таким образом, отсутствуеткажется, что стили находятся в 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%] маркеры inline

Answer 1

Начиная с Ionic 4 и Angular 6, вы должны удалить тег страницы / компонента.См. Миграция на Ionic 4 -> https://beta.ionicframework.com/docs/building/migration/#overview

Страница / компонент Sass больше не должен быть обернут в тег page / component и должен использовать опцию styleUrls Angular в @Component decorator

Так что это не ошибка, и все работает как положено!Поэтому, пожалуйста, прочитайте руководство по миграции и удалите оболочку, и все должно работать снова

Answer 2

Итак, я добился определенного прогресса в этом вопросе, и я пока отвечу на свой вопрос.

Кажется, это проблема с селекторами элементов в файлах 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.

Но если вы испытываете это, то это хорошая работа.вокруг сейчас