在不同的组件中使用不同的样式表 Angular Webpack答案

【问题标题】：Use different Stylesheets in different components Angular Webpack在不同的组件中使用不同的样式表 Angular Webpack
【发布时间】：2018-02-04 01:08:13
【问题描述】：

我正在开发一个 Angular Webpack 项目，我必须在该项目中为网页开发新设计。

之前的开发者通过在 index.html 文件中引用 Typebase.css 来构建所有网页。

现在我想在我的所有设计中使用引导程序。当我尝试使用它时，我所有的 CSS 都在 Typebase 和 bootstrap 之间搞砸了。

有什么方法可以让我在新设计组件中只使用引导程序，在旧网页的组件中只使用 Typebase，直到最终产品构建完成？

我尝试了 styleUrls 选项，但没有成功。那么我可以在 styleUrls 中包含样式表而不是全局吗？如果是，那么如何。

提前感谢您的任何小帮助。

【问题讨论】：

标签： angular webpack bootstrap-4 angular-components

【解决方案1】：

好的，如果所有旧网页都有一个容器组件，那么您可以在该组件中执行以下操作：

constructor (@Inject(DOCUMENT) private document) { }

ngOnInit() {
  let styleSheet = this.document.getElementById('your_style_link_id');
  //REMOVE IT 
}

所以首先你应该在 index.html 中包含这两种样式并给它们一个 ID。

之后，在旧页面的容器组件中，您应该删除“bootstrap”并添加旧样式表，在新页面的容器组件中，您应该删除旧样式表并添加引导程序。

【讨论】：

谢谢努尔。你的逻辑有效。这是我的代码 let styleSheet1 = document.styleSheets[1]; styleSheet1.disabled = true;

【解决方案2】：

是的，你可以做到。

首先您需要从 index.html 中删除 Typebase.css
在每个旧组件中显式添加 Typebase.css 例如：@Component({ 选择器：'选择器名称'，模板网址：'模板网址' styleUrls: ['./Typebase.css'] })
您可以将 styleUrls 中的 bootstrap.css 文件添加到新组件中。

不是最干净的方式，但这应该可以。

【讨论】：