angular2-css

Angular 2 styles compiler for Meteor

Processes styles and makes them accessible in the ways styles are used in Angular 2.

Currenly only less styles are supported. Make sure to remove less (if installed) package to avoid conflicts.

Usage

If a style file is placed in the client folder, it'll be processed as a regular Meteor style file, i.e., bundled together with other style files.

But if it's placed in the imports folder of your app, then there become available two other ways to access styles for a Angular 2 component.

• One way is to access them via URL using styleUrls property. If there is a component named Foo, and you want it to download own styles file ./foo.less (i.e., placed in the same folder with component) from the server, then the following snippet will do the job:

  1
  2 @Component({
  3   selector: 'foo',
  4   styleUrls: ['imports/foo.less.css']
  5 })
  6 class Foo {
  7 }
  8
  

• Another way is to have styles delivered to the client along with the component itself. In this way, you'll need to import the style file explicitly and use styles property, i.e.:

  1
  2 import style from `./foo.less.css`
  3
  4 @Component({
  5   selector: 'foo',
  6   styles: [style]
  7 })
  8 class Foo {
  9 }
  10
  

Examples

Check out TODO demo and its imports folder particularly for more info.