Loading multiple stylesheet for a component in Angular2

Question

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:

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:

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

I get the error

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

in browser console.

I then included the second stylesheet style2.css in 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.

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

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

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.

webpack.config(excerpt)

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

davaus · Accepted Answer · 2017-07-27 00:51:36Z

21

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:

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

answered Jul 27, 2017 at 0:51

davaus

1,16513 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

rosstripi Over a year ago

In the current version of Angular 4, couldn't you just do those import statements in the global styles.css file?

kanra-san Over a year ago

@davaus Doesn't that kinda defeat the purpose of passing values as an array in styleUrls. The meta's name it self suggest multiple style-sheets.

davaus Over a year ago

Hi Kanra-san. I agree; but the array didn't work (I tried it) and this method did.....

Avnesh Shakya · Accepted Answer · 2016-11-23 12:06:13Z

3

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.

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

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

Update#1

for webpack:

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

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

Hope will work for you.

edited Nov 23, 2016 at 12:06

answered Nov 23, 2016 at 11:42

Avnesh Shakya

3,9142 gold badges25 silver badges32 bronze badges

5 Comments

kanra-san Over a year ago

I am using webpack as module bundler. Your solution works when we have systemjs as module bundler.

Avnesh Shakya Over a year ago

I added updated for webpack, check out Update#1 above. Thanks

kanra-san Over a year ago

I tried with your configuration but no luck. I have posted my webpack.config above. Correct me if im wrong but theto-string-loader does the same work as toString() doesn't it? As i have mentioned above, when i add toString() the style sheet is loaded but it is being loaded globally and every other component is affected by it.

Avnesh Shakya Over a year ago

Try to add encapsulation: ViewEncapsulation.None in your component meta tag for that you have to import it => import {ViewEncapsulation} from '@angular/core'; Checkout this.

kanra-san Over a year ago

actually i have already tried that too but it was also of no use.

James · Accepted Answer · 2016-11-23 20:57:49Z

I believe the 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-loader which adds a style tag to the DOM and so will apply your styles globally.

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:

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

Collectives™ on Stack Overflow

Loading multiple stylesheet for a component in Angular2

3 Answers 3

3 Comments

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related