angular2-styles-loader

angular-styles-loader

A webpack loader to import styles for angular components.

What does this solves?

Angular2 components accept both template and styles and have some nice features if we use it that way.

@Component({
  selector: 'mq-adopta',
  template: '<h1>Hi</h1>',
  styles: [ 'h1 { color: red; }' ],
})
export default class ApplicationComponent { ... }

This loader allows you to load both templates and styles directly with Baggage Loader and include it by default in your component:

webpack.config.js

module: {
  preLoaders: [{
    test: /\.js/,
    loader: 'baggage?[file].html=template&[file].css=styles',
  }],
  loaders: [{
    test: /\.css/,
    loaders: 'css',
  }],
}

application.component.js

@Component({
  selector: 'mq-adopta',
  template, // In ES2015 this is the same as "template: template,"
  styles, // In ES2015 this is the same as "styles: styles,"
})
export default class ApplicationComponent { ... }

But this doesn't work because css-loader returns a format angualar doesn't understand.

How to use it?

This loader will modify the output of CSS loader to make it the format angular expects, so if we use this loader by default:

module: {
  preLoaders: [{
    test: /\.js/,
    loader: 'baggage?[file].html=template&[file].css=styles',
  }],
  loaders: [{
    test: /\.css/,
    loaders: [ 'angular2-styles', 'css' ],
  }],
},

We can use our styles directly on our components.

@Component({
  selector: 'mq-adopta',
  template,
  styles,
})
export default class ApplicationComponent { ... }