在 angular2 组件样式表中覆盖来自 Bootstrap 的样式 [英] Overwriting styles from Bootstrap in an angular2 component-stylesheet

问题描述

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

I have an angular2 application build with angular-cli containing several components. Each component has a referenced stylsheed (scss).

来自这些样式表的独特样式已正确应用于组件模板.

Unique styles from those stylesheets are correctly applied to the component-template.

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

What I cannot do is overwrite styles from external css's which are included in the angular-cli from those component-stylesheets.

只要我将样式移动到中央 style.scss 就可以了.

As soon as I move the style to the central styles.scss it works.

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

My angular-cli.json looks like this:

  "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 吗?

Any Ideas how I can overwrite the bootstrap-css in the component.scss?

推荐答案

我也将此问题作为可能的错误发布到 angular-cli 项目中，并得到了我需要的提示:

I've also posted this question as a possible bug to the angular-cli project and got the hint I needed:

模拟视图封装(默认)通过预处理(和重命名)CSS 代码来模拟 Shadow DOM 的行为，以有效地将 CSS 范围限定到组件的视图.如果这些类为此行为而重命名，则它无法工作，并且我无法覆盖来自 ie 的样式.引导程序.

Emulated view encapsulation (the default) emulates the behavior of Shadow DOM by preprocessing (and renaming) the CSS code to effectively scope the CSS to the component's view. If those classes got renamed for this behaviour, it cannot work and I cannot override styles from ie. bootstrap.

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

If I now set the encapsulation in the component to none, it works and I can override the styles in the component.scss.

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

这篇关于在 angular2 组件样式表中覆盖来自 Bootstrap 的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！