以角度覆盖包的css样式答案

【问题标题】：Overriding css styles of a package in angular以角度覆盖包的css样式
【发布时间】：2023-03-18 08:15:01
【问题描述】：

Angular cli 会自动加载 node_module 目录中的 css 文件。我正在使用@swimlane/ngx-dnd，它具有 css 样式。但我想为我的组件使用引导样式。这样做的标准方法是什么？
感谢任何想法和帮助。

【问题讨论】：

【解决方案1】：

如果您想覆盖一个包的样式，您可以在您自己的样式表或组件样式表中提供具有相同或更具体样式定义的覆盖。您的定义需要与他们的风格相匹配，但必须在他们的风格之后加载和/或更具体，以便您的风格正确应用。

如果你想排除他们的样式表，你需要使用某种 webpack 插件来忽略包目录中的 css 文件。

我推荐第一种方法。

如果您使用的包创建动态标记以及样式，您可能需要更改组件封装，以便您使用的组件可以成功地将您的样式应用于生成的 dom 元素。

【讨论】：

【解决方案2】：

在你的app.component.ts, 添加：

@Componenent({
   encapsulation:ViewEncapsulation.None,
   styleUrls:[''],  // Add your bootstrap css files
   templateUrl: ....
})

【讨论】：