为Angular2中的组件加载多个样式表

Question

我正在构建一个Angular2应用程序。当我尝试为同一组件加载多个样式表时，我会面临多个问题。这是我在做什么的代码：

import { Component } from '@angular/core';
@Component({
selector: 'my-tag',
templateUrl: 'my-tag.component.html',
styleUrls: [
    './style1.css',
    './style2.css'
    ]
})
export class MyTagComponent{}

现在是我的问题：

当我尝试从其他目录中包含CSS文件时：

styleUrls: [
    './style1.css',
    '../public/style2.css'
]

我得到错误

Uncaught Error: Expected 'styles' to be an array of strings.

在浏览器控制台中。

然后，

i然后在组件目录中包含了第二个样式表style2.css，并编写了第一个片段。现在，该样式正在加载，但正在加载全球。第二个样式表具有与Bootstrap相冲突的类名称，而不是Bootstrap的样式，而是在全球范围内应用了第二个样式表的样式，即其他组件的模板是从第二样式表中造型的。

不应该仅将styleUrls中列出的URL应用于组件，并且不对其他组件造成损害？

任何人都可以告诉我如何在不应用全球应用的情况下为特定组件加载多个CSS文件。

我还尝试了以下解决方案，但样式正在应用于我制作的所有组件上。

styles: [
      require('./style1.css').toString(),
      require('../public/style2.css').toString()
 ]

P.S。我正在使用webpack作为我的项目的模块捆绑包。

webpack.config（摘录）

 {
    test: /.css$/,
    exclude: helpers.root('src', 'app'),
    loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
  },
  {
    test: /.css$/,
    include: helpers.root('src', 'app'),
    loader: 'raw'
  }

Answer 1

我已经看到了使用这种方法：

@Component({
    selector: 'app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
}

app.component.css中有多个导入，因此：

@import url('/assets/plugins/bootstrap-datepicker/css/bootstrap-datepicker.css');
@import url('/assets/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.css');
@import url('/assets/plugins/ionRangeSlider/css/ion.rangeSlider.css');
@import url('/assets/plugins/ionRangeSlider/css/ion.rangeSlider.skinNice.css');

我希望这会有所帮助。

Answer 2

我们分别设置templateurl和styleurls元数据属性来包括模板和CSS文件。因为这些文件与组件共同分配，所以可以通过名称引用它们，而无需将路径指定回该应用程序的根。

我们可以更改Angular计算完整URL的方式将组件元数据的模块属性设置为 module.id.id 。

@Component({
  selector: 'my-tag',
  moduleId: module.id,
  templateUrl: 'my-tag.component.html',
  styleUrls:  ['style1.css', 'style2.css']
})
export class MyTagComponent { }

更新＃1

webpack：

尝试使用WebPack配置中的CSS使用" to-string-loader"。

{ test: /.css$/, loaders: ['to-string-loader', 'css-loader'] }

希望将为您工作。

Answer 3

i 相信问题在于您传递给extractplugin.extract的'样式'参数（loader：options | object）。我认为它是指此加载程序：https：//github.com/webpack/style-loader，将样式标签添加到DOM，因此将在全球应用您的样式。

我前几天遇到了这个问题，只是为了这篇文章而查找上述理由，应该回去正确修复它，但是我只需使用CSS-Loader，例如这个：

  {
    test: /.css$/,
    loader: "css-loader"
  }

以及将封装设置为ViewEncapsulation.native，并且如前所述，在加载的CSS上调用.toString（）。我想仍然可以将ExtractTextPlugin用于删除的"样式"加载器。