chore(): add scss and autoprefixer to build

build/autoprefixer-options.js

@@ -0,0 +1,9 @@
+// Options for autoprefixer. See https://github.com/postcss/autoprefixer#options
+module.exports = {
+  // To see the full list of supported browers, you can direcly use `browserslist`
+  browsers: [
+    'last 2 versions',
+    'not ie <= 10',
+    'not ie_mob <= 10',
+  ]
+};

ember-cli-build.js

@@ -1,8 +1,47 @@
-/* global require, module */
+var fs = require('fs');
+var path = require('path');
 
+var mergeTrees = require('broccoli-merge-trees');
 var Angular2App = require('angular-cli/lib/broccoli/angular2-app');
+var BroccoliSass = require('broccoli-sass');
+var broccoliAutoprefixer = require('broccoli-autoprefixer');
+
+var autoprefixerOptions = require('./build/autoprefixer-options');
 
 module.exports = function(defaults) {
-  var app = new Angular2App(defaults);
-  return app.toTree();
+  var demoAppCssTree = new BroccoliSass(['src/demo-app'], './demo-app.scss', 'demo-app.css');
+  var componentCssTree = getComponentsCssTree();
+  var angularAppTree = new Angular2App(defaults);
+
+  return mergeTrees([
+    angularAppTree.toTree(),
+    componentCssTree,
+    demoAppCssTree,
+  ]);
 };
+
+
+/** Gets the tree for all of the components' CSS. */
+function getComponentsCssTree() {
+  // Assume that the list of components is all directories in `src/components/`
+  var componentsSrc = 'src/components/';
+  var components = fs.readdirSync(componentsSrc)
+      .filter(file => fs.statSync(path.join(componentsSrc, file)).isDirectory());
+
+  var componentCssTrees = components.reduce((trees, component) => {
+    // We want each individual scss file to be compiled into a corresponding css file
+    // so that they can be individually included in styleUrls.
+    var scssFiles = fs.readdirSync(path.join(componentsSrc, component))
+        .filter(file => path.extname(file) === '.scss')
+        .map(file => path.basename(file, '.scss'));
+
+    return scssFiles.map(fileName => {
+      return BroccoliSass(
+        [`src/components/${component}`, 'src/core/style'], // Directories w/ scss sources
+        `./${component}.scss`,                             // Root scss input file
+        `components/${component}/${fileName}.css`);        // Css output file
+    }).concat(trees);
+  }, []);
+
+  return broccoliAutoprefixer(mergeTrees(componentCssTrees), autoprefixerOptions);
+}

package.json

@@ -14,6 +14,9 @@
   "devDependencies": {
     "angular-cli": "0.0.*",
     "angular-cli-github-pages": "^0.2.0",
+    "broccoli-autoprefixer": "^4.1.0",
+    "broccoli-merge-trees": "^1.1.1",
+    "broccoli-sass": "^0.7.0",
     "ember-cli-inject-live-reload": "^1.3.0",
     "jasmine-core": "^2.3.4",
     "karma": "^0.13.15",

src/components/button/button.scss

@@ -0,0 +1,7 @@
+@import 'variables';
+
+.hello {
+  display: flex;
+  width: $size;
+  height: $size;
+}

src/components/button/button.ts

@@ -12,10 +12,8 @@ import {Component, View, ViewEncapsulation, OnChanges, SimpleChange} from 'angul
     '(blur)': 'onBlur()',
     '[class.md-button-focus]': 'isKeyboardFocused',
   },
-})
-@View({
-  templateUrl: 'package:angular2_material/src/components/button/button.html',
-  styleUrls: ['package:angular2_material/src/components/button/button.css'],
+  templateUrl: './components/button/button.html',
+  styleUrls: ['./components/button/button.css'],
   encapsulation: ViewEncapsulation.None,
 })
 export class MdButton {
@@ -56,9 +54,8 @@ export class MdButton {
     '[class.md-button-focus]': 'isKeyboardFocused',
     '[attr.aria-disabled]': 'isAriaDisabled',
   },
-})
-@View({
-  templateUrl: 'package:angular2_material/src/components/button/button.html',
+  templateUrl: './components/button/button.html',
+  styleUrls: ['./components/button/button.css'],
   encapsulation: ViewEncapsulation.None
 })
 export class MdAnchor extends MdButton implements OnChanges {

src/core/style/variables.scss

@@ -0,0 +1 @@
+$size: 25px;

src/demo-app/demo-app.html

@@ -1,3 +1,5 @@
 <p>
   material2 Works!
-</p>
+
+  <button md-button>HELLO</button>
+</p>

src/demo-app/demo-app.ts

@@ -1,17 +1,12 @@
 import {Component} from 'angular2/core';
+import {MdButton} from '../components/button/button';
 
 
 @Component({
   selector: 'demo-app',
   providers: [],
   templateUrl: 'demo-app/demo-app.html',
-  directives: [],
+  directives: [MdButton],
   pipes: []
 })
-export class DemoApp {
-  defaultMeaning: number = 42;
-  
-  meaningOfLife(meaning: number) {
-    return `The meaning of life is ${meaning || this.defaultMeaning}`;
-  }
-}
+export class DemoApp { }

src/index.html

@@ -22,6 +22,10 @@
         'demo-app': {
           format: 'register',
           defaultExtension: 'js'
+        },
+        'components': {
+          format: 'register',
+          defaultExtension: 'js'
         }
       }
     });