chore: add sass support

See PatrickJS/PatrickJS-starter#136

Author: ojacquemart

config/webpack.common.js

@@ -134,6 +134,13 @@ module.exports = {
         loader: 'raw-loader'
       },
 
+      // Sass loader support for *.scss files
+      {
+        test: /\.scss$/,
+        exclude: /node_modules/,
+        loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
+      },
+
       // Raw loader support for *.html
       // Returns file content as string
       //

package.json

@@ -14,55 +14,41 @@
     "webpack-dev-server": "webpack-dev-server",
     "webdriver-manager": "webdriver-manager",
     "protractor": "protractor",
-
     "clean": "npm cache clean && npm run rimraf -- node_modules doc typings coverage dist",
-      "clean:dist": "npm run rimraf -- dist",
-        "preclean:install": "npm run clean",
-      "clean:install": "npm set progress=false && npm install",
-        "preclean:start": "npm run clean",
-      "clean:start": "npm start",
-
+    "clean:dist": "npm run rimraf -- dist",
+    "preclean:install": "npm run clean",
+    "clean:install": "npm set progress=false && npm install",
+    "preclean:start": "npm run clean",
+    "clean:start": "npm start",
     "watch": "npm run watch:dev",
-      "watch:dev": "npm run build:dev -- --watch",
-      "watch:dev:hmr": "npm run watch:dev -- --hot",
-      "watch:test": "npm run test -- --auto-watch --no-single-run",
-      "watch:prod": "npm run build:prod -- --watch",
-
+    "watch:dev": "npm run build:dev -- --watch",
+    "watch:dev:hmr": "npm run watch:dev -- --hot",
+    "watch:test": "npm run test -- --auto-watch --no-single-run",
+    "watch:prod": "npm run build:prod -- --watch",
     "build": "npm run build:dev",
-        "prebuild:dev": "npm run clean:dist",
-      "build:dev": "webpack --config config/webpack.dev.js --progress --profile --colors --display-error-details --display-cached",
-        "prebuild:prod": "npm run clean:dist",
-      "build:prod": "webpack --config config/webpack.prod.js  --progress --profile --colors --display-error-details --display-cached --bail",
-
+    "prebuild:dev": "npm run clean:dist",
+    "build:dev": "webpack --config config/webpack.dev.js --progress --profile --colors --display-error-details --display-cached",
+    "prebuild:prod": "npm run clean:dist",
+    "build:prod": "webpack --config config/webpack.prod.js  --progress --profile --colors --display-error-details --display-cached --bail",
     "server": "npm run server:dev",
-      "server:dev": "webpack-dev-server --config config/webpack.dev.js --inline --progress --profile --colors --watch --display-error-details --display-cached --content-base src/",
-      "server:dev:hmr": "npm run server:dev -- --hot",
-      "server:prod": "http-server dist --cors",
-
+    "server:dev": "webpack-dev-server --config config/webpack.dev.js --inline --progress --profile --colors --watch --display-error-details --display-cached --content-base src/",
+    "server:dev:hmr": "npm run server:dev -- --hot",
+    "server:prod": "http-server dist --cors",
     "webdriver:update": "npm run webdriver-manager update",
     "webdriver:start": "npm run webdriver-manager start",
-
     "lint": "npm run tslint 'src/**/*.ts'",
-
-      "pree2e": "npm run webdriver:update -- --standalone",
+    "pree2e": "npm run webdriver:update -- --standalone",
     "e2e": "npm run protractor",
-      "e2e:live": "npm run e2e -- --elementExplorer",
-
+    "e2e:live": "npm run e2e -- --elementExplorer",
     "test": "node --max-old-space-size=4096 node_modules/karma/bin/karma start",
-
     "ci": "npm run e2e && npm run test",
-
     "docs": "npm run typedoc -- --options typedoc.json --exclude '**/*.spec.ts' ./src/",
-
     "start": "npm run server:dev",
-      "start:hmr": "npm run server:dev:hmr",
-
+    "start:hmr": "npm run server:dev:hmr",
     "postinstall": "npm run typings -- install",
-
-      "preversion": "npm test",
+    "preversion": "npm test",
     "version": "npm run build",
-      "postversion": "git push && git push --tags"
-
+    "postversion": "git push && git push --tags"
   },
   "dependencies": {
     "@angular2-material/button": "^2.0.0-alpha.1",
@@ -81,6 +67,7 @@
   "devDependencies": {
     "angular2-hmr": "~0.5.5",
     "awesome-typescript-loader": "~0.16.2",
+    "codelyzer": "0.0.12",
     "compression-webpack-plugin": "^0.3.0",
     "copy-webpack-plugin": "^1.1.1",
     "css-loader": "^0.23.1",
@@ -104,14 +91,15 @@
     "karma-phantomjs-launcher": "^1.0.0",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "1.7.0",
-    "codelyzer": "0.0.12",
+    "node-sass": "^3.4.2",
     "parse5": "^1.3.2",
     "phantomjs-polyfill": "0.0.2",
     "phantomjs-prebuilt": "^2.1.6",
     "protractor": "^3.1.1",
     "raw-loader": "0.5.1",
     "remap-istanbul": "^0.5.1",
     "rimraf": "^2.5.2",
+    "sass-loader": "^3.2.0",
     "source-map-loader": "^0.1.5",
     "style-loader": "^0.13.0",
     "ts-helper": "0.0.1",

src/app/app.component.ts

@@ -1,7 +1,7 @@
 /*
  * Angular 2 decorators and services
  */
-import {Component} from 'angular2/core';
+import {Component, ViewEncapsulation} from 'angular2/core';
 import {RouteConfig, Router} from 'angular2/router';
 
 import {Home} from './home';
@@ -17,24 +17,10 @@ import {RouterActive} from './router-active';
   pipes: [ ],
   providers: [ ],
   directives: [ RouterActive ],
-  styles: [`
-    h1 {
-      font-family: Arial, Helvetica, sans-serif
-    }
-    nav ul {
-      display: inline;
-      list-style-type: none;
-      margin: 0;
-      padding: 0;
-      width: 60px;
-    }
-    nav li {
-      display: inline;
-    }
-    nav li.active {
-      background-color: lightgray;
-    }
-  `],
+  styles: [
+    require('./app.scss')
+  ],
+  encapsulation: ViewEncapsulation.None,
   template: `
     <header>
       <nav>

src/app/app.scss

@@ -0,0 +1,22 @@
+$background: tomato;
+
+html {
+  background-color: $background;
+}
+
+h1 {
+  font-family: Arial, Helvetica, sans-serif
+}
+nav ul {
+  display: inline;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  width: 60px;
+}
+nav li {
+  display: inline;
+}
+nav li.active {
+  background-color: lightgray;
+}

src/vendor.ts

@@ -23,7 +23,7 @@ import 'rxjs/add/operator/mergeMap';
 // import '@angular2-material/checkbox';
 // import '@angular2-material/radio';
 // import '@angular2-material/progress-circle';
-// import '@angular2-material/card';
+ import '@angular2-material/card';
 // look in platform/directives and platform/providers
 
 if ('production' === ENV) {