Angular-cli 构建生成的 CSS 不起作用

Question

我有一个 angular-cli 应用程序并使用 webpack。 当我尝试运行它时，组件特定的 css 不起作用

styles.css

    /* You can add global styles to this file, and also import other style files*/
@import 'http://something/v4/dist/css/bootstrap.min.css';

组件

@Component({
  selector: 'app-carousel',
  templateUrl: './carousel.component.html',
  styleUrls: ['./carousel.component.css']
})
export class CarouselComponent implements OnInit {

组件 CSS

.carousel-indicators { display: none; }

angular-cli.config

 "styles": [
        "styles.css",
        "../node_modules/roboto-fontface/css/roboto/sass/roboto-fontface-bold.scss",
        "../node_modules/roboto-fontface/css/roboto/sass/roboto-fontface-light.scss",
        "../node_modules/roboto-fontface/css/roboto/sass/roboto-fontface-regular.scss"       
      ],

呈现的 html

<style type="text/css">@import url(http://something/v4/dist/css/bootstrap.min.css);</style>
<style type="text/css">/* You can add global styles to this file, and also import other style files */
</style><style></style><style>.carousel-indicators[_ngcontent-c5] { display: none; }</style>

但这不适用于我的 html 元素“carousel-indicators” 如果我将carousel.component.css导入styles.css，那么它可以工作，但它在生成的html中出现两次

我正在寻找正确的方法

Answer 1

默认情况下（如您的情况）角度使用 ViewEncapsulation.Emulated 范围您的 css。但是 Angular 中有 3 个视图封装选项：

• Native 视图封装使用浏览器的原生 shadow DOM 实现（参见 MDN 站点上的 Shadow DOM）将一个 shadow DOM 附加到组件的宿主元素，然后将组件视图放入其中那个影子 DOM。组件的样式包含在 shadow DOM 中。

• Emulated 视图封装（默认）通过预处理（和重命名）CSS 代码来模拟影子 DOM 的行为，从而有效地将 CSS 限定为组件的视图。详见附录一。

• None 表示 Angular 没有视图封装。 Angular 将 CSS 添加到全局样式中。前面讨论的范围规则、隔离和保护不适用。这与将组件的样式粘贴到 HTML 中基本相同。

因此，当您将任何样式应用于component.css 中的component（默认为ViewEncapsulation.Emulated）时，样式将仅应用于该特定组件，它不会泄漏到组件外部并且始终具有优先级在全局样式之上，除非全局样式有!important。

因此，您的 html 文件头部的样式如下：

<style>.carousel-indicators[_ngcontent-c5] { display: none; }</style>

如果您在styles.css 中引用您的component.css，那么它将成为在html 头中呈现的全局样式，如下所示：

<style type="text/css">/* You can add global styles to this file, and also import other style files */
.carousel-indicators {
  display: none; }
</style>

当您在competent 中声明您的样式，然后在styles.css 中引用您的component.css 时，competent 样式只是在您的 html 中加倍：一个副本是全局样式，另一个副本是范围组件样式。

我试图复制您的问题，但我的compentnt.css 总是被应用。我正在使用最新的稳定 angular cli 1.3.2。如果您使用的是较旧的 cli，请尝试更新。否则，将您的代码推送到 github 或创建一个 plunker，以便我查看。

更新：您的自定义 css 可能会被您引用的一些全局样式表覆盖。您可以使用 chrome 开发工具来调试样式，也可以尝试将 !important 放入您的自定义 css 中，看看是否有帮助。

Answer 2

所有登陆这里的人：

问题在于 ViewEncapsulation.Emulated 我将其更改为 ViewEncapsulation.None，如此 stackoverflow 答案中所述：

how to hide ngb-carousel indicators and prev-next control

感谢您的帮助