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

Question

我正在处理一个 Angular Webpack 项目，我必须在其中开发新的网页设计。

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

现在我想将 bootstrap 用于我的所有设计。当我尝试使用它时，我的所有 CSS 都在 Typebase 和 bootstrap.

之间混乱了

有什么方法可以让我的新设计组件只使用 bootstrap 而在旧网页的组件中只使用 Typebase 直到最终产品建立起来？

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

提前感谢您的帮助。

Answer 1

是的，你可以做到。

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

不是最干净的方法，但这应该可行。

Answer 2

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

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

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

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

之后，在旧页面的容器组件中，您应该删除 "bootstrap" 并添加旧样式 sheet，在新页面的容器组件中，您应该删除旧样式sheet 并添加 bootstrap.

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

Use different Stylesheets in different components Angular Webpack

webpack

bootstrap-4

angular-components

angular