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

Loading multiple stylesheet for a component in Angular2

提问by kanra-san

I am building an angular2 application. I am facing multiple problems when i try to load multiple stylesheet for the same component. Here is a the code of what i am doing:

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

import { Component } from '@angular/core';

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

Now here are my problems:

现在这是我的问题：

When i try to include the the css file from other directory like this:

当我尝试从其他目录中包含 css 文件时，如下所示：

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

I get the error

我收到错误

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

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

in browser console.

在浏览器控制台中。

I then included the second stylesheet style2.cssin the directory of the component and wrote the first snippet. Now the style is being loaded but it is being loaded globally. The second stylesheet has class names that clash with the bootstrap and instead of bootstrap's style the second stylesheet's style is being applied globally, i.e. other components' templates are being styled from second stylesheet.

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

Shouldn't the urls listed in styleUrlsbe applied only on the component and not do harm to other components?

中列出的 url 不应该styleUrls只应用于组件而不会对其他组件造成伤害吗？

Can anyone tell me how to load multiple css files for the a specific component without being applied globally.

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

I have also tried the following workarounds but the style is being applied on all the components that i made.

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

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

P.S. I am using webpack as the module bundler for my project.

PS 我使用 webpack 作为我项目的模块打包器。

webpack.config(excerpt)

webpack.config（摘录）

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

回答by davaus

I have seen this approach used:

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

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

Where app.component.css has multiple imports in it, thus:

其中 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');

I hope this helps.

我希望这有帮助。

回答by Avnesh Shakya

We include the template and CSS files by setting the templateUrl and styleUrls metadata properties respectively. Because these files are co-located with the component, it would be nice to refer to them by name without also having to specify a path back to the root of the application.

我们通过分别设置 templateUrl 和 styleUrls 元数据属性来包含模板和 CSS 文件。由于这些文件与组件位于同一位置，因此最好按名称引用它们，而不必指定返回应用程序根目录的路径。

We can change the way Angular calculates the full URL be setting the component metadata's moduleId property to module.id.

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

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

Update#1

更新#1

for webpack:

对于 webpack：

Try to use the 'to-string-loader' for css in webpack config.

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

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

Hope will work for you.

希望对你有用。

回答by James

I believethe problem is with the 'style' argument you pass to ExtractPlugin.extract(loader: options|object). I think it refers to this loader: https://github.com/webpack/style-loaderwhich adds a style tag to the DOM and so will apply your styles globally.

我相信问题在于您传递给 ExtractPlugin.extract(loader: options|object) 的“样式”参数。我认为它指的是这个加载器：https: //github.com/webpack/style-loader，它向 DOM 添加了样式标签，因此将全局应用您的样式。

I ran into this problem the other day and only looked up the above justification for the sake of this post and should go back and fix it properly with that in mind, but I got around it by simply using the css-loader like this:

前几天我遇到了这个问题，只是为了这篇文章而查找了上述理由，并且应该考虑到这一点并返回并正确修复它，但我通过简单地使用 css-loader 解决了它，如下所示：

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

as well as setting the encapsulation to ViewEncapsulation.Native and, as you noted earlier, calling .toString() on the loaded CSS. I imagine that the ExtractTextPlugin could still be used instead with the 'style' loader removed, though.

以及将封装设置为 ViewEncapsulation.Native，正如您之前提到的，在加载的 CSS 上调用 .toString()。不过，我想在移除“样式”加载程序后，仍然可以使用 ExtractTextPlugin。