Блог

Я использую этот компонент https://alyle.io/components/image-cropper , все было хорошо в локальной среде разработки. НО когда мы развернули код в рабочей среде с --prod помощью build, наши пользовательские стили перестали работать…

Версия @alyle/ui@ : ^ 10.3.0

 $ node_modules/.bin/ng --version

Angular CLI: 10.1.6
Node: 12.18.3
OS: win32 x64

Angular: 10.1.5
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1001.6
@angular-devkit/build-angular   0.1001.6
@angular-devkit/core            10.1.6
@angular-devkit/schematics      10.1.6
@angular/cdk                    10.2.4
@angular/cli                    10.1.6
@angular/material               10.2.4
@schematics/angular             10.1.6
@schematics/update              0.1001.6
rxjs                            6.6.3
typescript                      3.9.7

  

Я скопировал большую часть кода из примера на странице :

 const STYLES = (_theme: ThemeVariables, ref: ThemeRef) => {
  ref.renderStyleSheet(SLIDER_STYLES);
  const slider = ref.selectorsOf(SLIDER_STYLES);
  return {
    cropper        : lyl`{
      max-width: 238px
      height: 238px
    }`,
    sliderContainer: lyl`{
      position: relative
      ${slider.root} {
        margin: auto
        display : block
      }
    }`,
    slider         : lyl`{
      padding: 1em
    }`,
    cropResult     : lyl`{
      border-radius: 50%
    }`
  };
};
  

С помощью этого html

 <div ly-dialog-content [lyPx]="0" class="custom-cropper">
  
  <div class="title-cropper">
    Crop Image and Upload
    <!-- <button *ngIf="ready" ly-button color="primary" (click)="dialogRef.close()">X</button> -->
    <button mat-raised-button *ngIf="ready" color="primary" class="container__close-icon close-icon" (click)="dialogRef.close()">
    </button>
  </div>

  <ly-img-cropper [withClass]="classes.cropper"
                  [config]="myConfig"
                  [(scale)]="scale"
                  (ready)="ready = true"
                  (cleaned)="ready = false"
                  (minScale)="minScale = $event"
                  (cropped)="onCropped($event)"
                  (loaded)="onLoaded($event)"
                  (error)="onError($event)"
  >
    <span>Drag and drop image</span>
  </ly-img-cropper>

  <div *ngIf="ready" [className]="classes.sliderContainer">
    <div [class]="classes.slider">
      <ly-slider
        [thumbVisible]="false"
        [min]="minScale"
        [max]="1"
        [(ngModel)]="scale"
        (input)="scale = $event.value"
        step="0.000001"></ly-slider>
    </div>
  </div>

</div>
  

Я добавил custom-cropper класс, чтобы мой коллега мог стилизовать компонент по мере необходимости, это отлично работало в среде разработки, но после того, как мы развернули код в производство --prod , эти пользовательские стили перестали работать

Например, в моем локальном прогоне разработчика есть эти классы: LyImageCropper-root-af cropper-ab но в прогоне prod есть эти : af ab ?? что полностью портит стили, предоставляемые .custom-cropper class .

В документах нет ничего, что помогло бы. Я также создал проблему в репозитории githup https://github.com/A-l-y-l-e/Alyle-UI/issues/137

чего мне здесь не хватает?