在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.

在浏览器控制台中

然后我将第二个样式表包含在style2.css组件的目录中并编写了第一个代码段.现在正在加载样式,但它正在全局加载.第二个样式表具有与引导程序冲突的类名,而不是bootstrap的样式,第二个样式表的样式正在全局应用,即其他组件的模板正在从第二个样式表进行样式化.

列出的网址不应styleUrls仅应用于组件而不会损害其他组件吗？

任何人都可以告诉我如何为特定组件加载多个css文件,而不是全局应用.

我还尝试了以下变通方法,但样式正在应用于我制作的所有组件.

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

PS我使用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 文件。由于这些文件与组件位于同一位置，因此最好通过名称引用它们，而不必指定返回应用程序根目录的路径。

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

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

更新#1

对于网页包：

尝试在 webpack 配置中对 css 使用“to-string-loader”。

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

希望对你有用。