Question

我在组件级别（my-component.scss）定义了一些CSS

INSERT INTO `TableA` (`TableACol1`,`TableACol2`) VALUES ( 4, SELECT `TableBcol1` FROM `TableB` WHERE FirstName="shasha" )

因为我想将此样式用于各种组件（并且不允许将样式插入style.scss），所以我创建了一个新文件“ cms.scss” ， app-page-content 部分。

现在 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;
    }

  }

}

和 cms.scss

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

不幸的是，现在该样式已得到更多应用，因为它已被浏览器完全忽略。

我该如何解决？

Answer 1

如@trichetriche所建议，我直接从组件装饰器中导入了 cms.scss 。

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

这种方式没有问题。

来自导入的CSS文件的CSS样式不适用

1 个答案: