title: Angular 4 + Material 2 SASS compile error "File to import not found or unreadable"
body: <p>I'm trying to use a custom theme but I keep getting the error:</p>
  
  <pre><code>{
    "status": 1,
    "file": "/home/adam/Projects/test-material/src/unicorn.scss",
    "line": 1,
    "column": 1,
    "message": "File to import not found or unreadable: ~@angular/material/theming.\nParent style sheet: /home/adam/Projects/test-material/src/unicorn.scss",
    "formatted": "Error: File to import not found or unreadable: ~@angular/material/theming.\n       Parent style sheet: /home/adam/Projects/test-material/src/unicorn.scss\n        on line 1 of src/unicorn.scss\n&gt;&gt; @import '~@angular/material/theming';\n   ^\n"
  }
  </code></pre>
  
  <p>I've installed a brandy new Angular just to test it, and I keep getting the same error.
  I tried:</p>
  
  <pre><code>$ ng new test-material
  $ cd test-material/
  $ npm install --save @angular/material
  </code></pre>
  
  <p>Then I created a file named <code>src/unicorn.scss</code> and pasted the example custom theme from <a href="https://material.angular.io/guide/theming" rel="noreferrer">https://material.angular.io/guide/theming</a> and tried to compile it using:
  <code>
  $ node-sass src/unicorn.scss dist/unicorn.css
  </code>
  I got the previously mentioned error.
  The content of <code>unicorn.scss</code> is:</p>
  
  <pre><code>@import '~@angular/material/theming';
  @include mat-core();
  $candy-app-primary: mat-palette($mat-indigo);
  $candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
  $candy-app-warn:    mat-palette($mat-red);
  $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
  @include angular-material-theme($candy-app-theme);
  </code></pre>
  
  <p>I'm using Angular 4 and Material 2.0.0-beta.3
  This is my package.json:</p>
  
  <pre><code>{
    "name": "test-material",
    "version": "0.0.0",
    "license": "MIT",
    "scripts": {
      "ng": "ng",
      "start": "ng serve",
      "build": "ng build",
      "test": "ng test",
      "lint": "ng lint",
      "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
      "@angular/common": "^4.0.0",
      "@angular/compiler": "^4.0.0",
      "@angular/core": "^4.0.0",
      "@angular/forms": "^4.0.0",
      "@angular/http": "^4.0.0",
      "@angular/material": "^2.0.0-beta.3",
      "@angular/platform-browser": "^4.0.0",
      "@angular/platform-browser-dynamic": "^4.0.0",
      "@angular/router": "^4.0.0",
      "core-js": "^2.4.1",
      "rxjs": "^5.1.0",
      "zone.js": "^0.8.4"
    },
    "devDependencies": {
      "@angular/cli": "1.0.0",
      "@angular/compiler-cli": "^4.0.0",
      "@types/jasmine": "2.5.38",
      "@types/node": "~6.0.60",
      "codelyzer": "~2.0.0",
      "jasmine-core": "~2.5.2",
      "jasmine-spec-reporter": "~3.2.0",
      "karma": "~1.4.1",
      "karma-chrome-launcher": "~2.0.0",
      "karma-cli": "~1.0.1",
      "karma-jasmine": "~1.1.0",
      "karma-jasmine-html-reporter": "^0.2.2",
      "karma-coverage-istanbul-reporter": "^0.2.0",
      "protractor": "~5.1.0",
      "ts-node": "~2.0.0",
      "tslint": "~4.5.0",
      "typescript": "~2.2.0"
    }
  }
  </code></pre>