Стиль CSS не применяется, если он взят из импортированного файла CSS

Question

Я определил некоторые CSS на уровне компонентов (my-component.scss)

@import '../../../../../theme';

app-page-content {

  box-sizing: border-box;
  display: block;

  div {
    background-color: #fff;
    padding: 24px;
    box-sizing: border-box;

    ::ng-deep .mat-form-field-appearance-legacy {
      .mat-form-field-infix {
        border: 0 !important;
      }
    }

    ::ng-deep .mat-radio-label-content,
    .mat-list-text,
    ::ng-deep .mat-select-value,
    .mat-input-element {
      font-size: 14px;
    }

    ::ng-deep mat-list-option[aria-selected="true"] .mat-pseudo-checkbox {
      background-color: mat-color($palette-primary);
    }

    .mat-list-base .mat-list-item,
    .mat-list-base .mat-list-option {
      height: 30px !important;
    }

    mat-form-field {
      width: 100%;
      padding-bottom: 20px;
    }

    mat-radio-group {
      padding-bottom: 40px;
      display: inline-block;
    }

    mat-radio-button {
      margin-right: 10px;
    }

    .file-uploader {
      margin-bottom: 40px !important;
      display: block;
    }

    .file-uploader button {
      background-color: #444;
    }

    .upload-progress {
      font-size: 12px;
    }

  }

}

Поскольку я хочу использовать этот стиль для различных компонентов (и мне не разрешено вставлять стиль в style.scss), я создал новый файл "cms.scss" , куда я переместил app-page-content part.

Теперь my-component.scss выглядит так

@import '../../../../../theme';
@import url('../../style/cms.scss');

И cms.scss

app-page-content {

  box-sizing: border-box;
  display: block;

  div {
    background-color: #fff;
    padding: 24px;
    box-sizing: border-box;

    ::ng-deep .mat-form-field-appearance-legacy {
      .mat-form-field-infix {
        border: 0 !important;
      }
    }

    ::ng-deep .mat-radio-label-content,
    .mat-list-text,
    ::ng-deep .mat-select-value,
    .mat-input-element {
      font-size: 14px;
    }

    ::ng-deep mat-list-option[aria-selected="true"] .mat-pseudo-checkbox {
      background-color: mat-color($palette-primary);
    }

    .mat-list-base .mat-list-item,
    .mat-list-base .mat-list-option {
      height: 30px !important;
    }

    mat-form-field {
      width: 100%;
      padding-bottom: 20px;
    }

    mat-radio-group {
      padding-bottom: 40px;
      display: inline-block;
    }

    mat-radio-button {
      margin-right: 10px;
    }

    .file-uploader {
      margin-bottom: 40px !important;
      display: block;
    }

    .file-uploader button {
      background-color: #444;
    }

    .upload-progress {
      font-size: 12px;
    }

  }

}

К сожалению, стиль теперь более применим, так как он полностью игнорируется браузером.

Как я могу это исправить?

Answer 1

Как подсказывает @trichetriche, я импортировал cms.scss напрямую из декоратора компонентов.

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.html',
  styleUrls: ['../../style/cms.scss']
})

Таким образом, проблем не возникает.