css - 在 angular2 组件样式表中覆盖来自 Bootstrap 的样式

Question

我有一个 angular2 应用程序构建，其中包含多个组件的 angular-cli。每个组件都有一个引用的样式表 (scss)。

这些样式表中的独特样式已正确应用于组件模板。

我不能做的是覆盖来自外部 css 的样式，这些样式包含在那些组件样式表的 angular-cli 中。

只要我将样式移动到中央 styles.scss，它就会起作用。

我的 angular-cli.json 看起来像这样:

  "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.css",
    "../node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker.css",
    "../node_modules/bootstrap-timepicker/css/bootstrap-timepicker.css",
    "styles.scss"
  ],

有什么想法可以覆盖 component.scss 中的 bootstrap-css 吗？

Answer 1

我还将这个问题作为一个可能的错误发布到了 angular-cli 元素中，并得到了我需要的提示:

模拟 View 封装(默认)通过预处理(和重命名)CSS 代码来模拟 Shadow DOM 的行为，以有效地将 CSS 范围限定到组件的 View 。如果这些类因为这种行为而被重命名，它就无法工作，我也无法覆盖 ie 的样式。 Bootstrap 。

如果我现在将组件中的封装设置为无，它会起作用并且我可以覆盖 component.scss 中的样式。

@Component({
    selector: 'app-generic-view',
    templateUrl: './generic-view.component.html',
    styleUrls: ['./generic-view.component.scss'],
    encapsulation: ViewEncapsulation.None
})