Struggling with my angular2 application, I encountered an issue when attempting to load multiple stylesheets for the same component. Below is a snippet of the code:
import { Component } from '@angular/core';
@Component({
selector: 'my-tag',
templateUrl: 'my-tag.component.html',
styleUrls: [
'./style1.css',
'./style2.css'
]
})
export class MyTagComponent{}
The problem arises when trying to include a CSS file from another directory in this manner:
styleUrls: [
'./style1.css',
'../public/style2.css'
]
This results in the error message
Uncaught Error: Expected 'styles' to be an array of strings.In order to avoid this, I relocated the second stylesheet style2.css to the component's directory and used the initial code snippet. However, this led to a new issue where the styling is applied globally instead of just to the component itself. The conflicting class names in the second stylesheet override the Bootstrap style, affecting all other components in the application.
Shouldn't the URLs specified in styleUrls only affect the specific component without causing interference elsewhere?
If anyone has a solution on how to load multiple CSS files for a specific component without global impact, your input would be greatly appreciated.
I have tested various solutions including:
styles: [
require('./style1.css').toString(),
require('../public/style2.css').toString()
]
However, these attempts still result in the styles being applied universally across all components.
For additional context, I am utilizing webpack as the module bundler for this 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'
}