Angular Web Component，如何将css文件嵌入到最终的js文件中？

Question

我有一个使用 Angular 创建的简单 Web 组件。我可以将它构建到一个 JavaScript 和一个 css 文件中，并在另一个网页上运行它。

如何将css文件嵌入到js文件中？

我有信心可以做到，但我找不到任何关于如何做到的答案。

Angular 项目设置为使用 css 文件。它还使用 Angular 材料。我想到了在组件文件中定义所有样式的想法。不确定这是否会导致我正在寻找的结果。

编辑： 为了达到这一点，我主要按照 this 教程中列出的步骤进行操作。

我现在找到了一些教程，讨论如何更改 Angular 项目中的 webpack.config 文件，但该文件不存在，我怀疑它会自动神奇地考虑到它如果我添加它。

Answer 1

既然你在谈论“网络组件”，为了定义，我想你正在使用影子Dom，所以将你的angular组件的封装设置为影子Dom （默认是模拟的）。当您使用 Shadow Dom 时，所有 css 和 html 元素（Dom）都被“封装”在组件（Shadow root）内，以避免与外部元素发生冲突。因此，组件中包含的 CSS 代码不会影响其他元素内部，也不会受到外部影响：这是 Web 组件的正常行为。我认为您不需要单个 CSS 文件，因为您可以将 Web 组件编译成一个包含所有内容的 js。

如果你想操纵你的组件的样式，你可以使用一些@input 属性：例如：@input() background-color，设置动态改变背景颜色的逻辑，当调用来自外部的组件，传递输入属性:

<my-web-component [background-color]="red"/>

你甚至可以在组件中定义一些 CSS 类在您的 angular 应用程序之外使用。

编辑： 如何在 angular 中设置阴影 DOM：

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css'],
  //just add this row on you component metadata decorator
  encapsulation: ViewEncapsulation.None //default is  ViewEncapsulation.Emulated
})

关于 webpack 看看这个 Angular CLI 扩展：https://github.com/manfredsteyer/ngx-build-plus

Angular Web Component，如何将css文件嵌入到最终的js文件中？

Angular Web Component, how to embed css file into the final js file?

javascript

css

web-component

angular