I am trying to add an external reference to a CSS file in Angular2 using Webpack. My css is defined as
{ test: /\.css$/, loader: "style-loader!css-loader" },
in my webpack.config.js file and I can load css just fine when doing in a head of a typescript file:
require("./styles/style.css");
However when I try and load a CSS file inline inside a component as in:
@Component({
selector: 'todo-list',
template: `
<section class="todoapp">
</section>
`,
styles: [require('./Todolist.css')], // <--------------
directives: [TodoItem],
providers: [TodosService]
...
I get an error of: EXCEPTION: TypeError: s.replace is not a function
I also tried to load CSS via:
styles: [require('style-loader!css-loader!./Todolist.css')]
but not much luck
any help is appreciated
regards
Sean
[require('style-loader!css-loader!./Todolist.css').toString()]? – Eric Martinez Jan 20 at 20:21