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

时间:2018-02-04 01:08:13

标签: angular webpack bootstrap-4 angular-components

我正在开展一个Angular Webpack项目,我必须为其开发新的网页设计。

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

现在我想为我的所有设计使用bootstrap。当我尝试使用它时,我的所有CSS都在Typebase和bootstrap之间混乱。

在最终产品构建之前,有没有什么方法可以只使用bootstrap作为我的新设计组件和只有Typebase的旧网页组件?

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

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

2 个答案:

答案 0 :(得分:1)

是的,你可以做到。

  1. 首先,您需要从index.html
  2. 中删除Typebase.css
  3. 显式地在每个旧组件中添加Typebase.css 例如:@Component({ selector:'selectorName', templateUrl:'templateUrl' styleUrls:['。/ Typebase.css'] })
  4. 您可以将styleUrls中的bootstrap.css文件添加到新组件中。
  5. 不是最干净的方式,但这应该有用。

答案 1 :(得分:1)

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

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

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

首先,您应该在index.html中包含这两种样式,并为每个样式分配一个ID。

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