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

Posted 2023-03-06

【中文标题】Angular-cli 构建生成的 CSS 不起作用

【英文标题】：Angular-cli build generated CSS not working

【发布时间】：2018-02-07 13:14:05

【问题描述】：

我有一个 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中出现两次

我正在寻找正确的方法

【问题讨论】：

可能是因为我正在混合使用 scss 和 css？

我在这里找到了我的问题的答案：***.com/questions/45788972/…

【参考方案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 中，看看是否有帮助。

【讨论】：

我更新了我的 Angular cli，我仍然有错误。我认为这是因为我使用的是 ng-boostrap 组件（轮播），因为如果我将 css 放在另一个组件中，它可以正常工作

【参考方案2】：

所有登陆这里的人：

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

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

感谢您的帮助

【讨论】：

ViewEncapsulation.None 将您的 component.css 样式添加到全局样式中，就是这样。这样你的组件样式也会失去范围等。