Loading multiple stylesheets for a component in Angular2

Question

I am creating an angular2 application. I encounter several problems when I try to load multiple stylesheets for the same component. Here is the code of what I am doing:

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 css file from another directory, for example:

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

I get an error

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

in the browser console.

Then I included the second stylesheet style2.cssin the component directory and wrote the first snippet. Now the style is loading, but it is loading all over the world. The second style sheet has class names that encounter bootstrapping, and instead of the bootstrap style, a second style is used all over the world, i.e. Templates for other components are created from the second stylesheet.

URL-, styleUrls ?

- , 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

CSS, templateUrl styleUrls. , , .

, Angular URL-, metadata moduleId module.id.

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

# 1

webpack:

'to-string-loader' css webpack.

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

.

Answer 3

, "style", ExtractPlugin.extract(loader: options | object). , : https://github.com/webpack/style-loader, DOM .

, , css-loader like :

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

ViewEncapsulation.Native , , .toString() CSS. , ExtractTextPlugin .