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

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

由于我想对各种组件使用这种样式（并且我不允许将样式插入style.scss），我创建了一个新文件“cms.scss”，在那里我移动了应用程序页面内容部分

现在my-component.scss看起来是这样的

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

和cms.scss

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

---

如何解决这个问题？

根据@trichetriche的建议，我直接从组件装饰器导入了cms.scs

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

---

这样就没有问题了。

为什么不将它导入组件装饰器中的

样式URL

数组中呢？为什么你要使用

url（…）

，而不只是在上面一行使用它呢？使用url（…）是可以的，但是为了格式的一致性，我建议你最好坚持一种格式，正如@trichetriche所指出的。@trichetriche，我忘记了

styleurl

选项。关于

url（…）

的东西，我只是复制粘贴了一些代码，这就是为什么。让我试试

样式URL

way@tnkh即使很好，同样的结果也需要10个字符。。。这不是在SASS中导入文件的推荐方法！

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

  }

}

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