css - 为 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 :预期的“样式”是一个字符串数组。

在浏览器控制台中。

然后我将第二个样式表 style2.css 包含在组件的目录中并编写了第一个片段。现在正在加载样式，但它正在全局加载。第二个样式表具有与 Bootstrap 冲突的类名，而不是 Bootstrap 的样式，第二个样式表的样式正在全局应用，即其他组件的模板正在从第二个样式表设置样式。

styleUrls 中列出的 url 是否应该仅应用于组件而不会对其他组件造成损害？

谁能告诉我如何在不全局应用的情况下为特定组件加载多个 css 文件。

我也尝试了以下变通方法，但该样式已应用于我制作的所有组件。

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

附言我正在使用 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');

希望对您有所帮助。