Angular2 - kann nicht auf angular-cli bauen

Question

Ich versuche SASS mit angular-cli zu verwenden. Ich habe die Dokumente gelesen und andere SO q/a's gefunden, die darüber reden, es einzurichten ... aber es scheitert immer am Aufbau.

Hier ist mein Setup:

Winkel-cli-build.js

sassCompiler: { 
    includePaths: ['src/app/styles'] 
} 

src/app/styles/master.scss

@import 'folder/variables'; 
@import 'folder/headers'; 

src/app/styles/Ordner/_variables.scss

$headers-bg: #ababab; 

src /app/styles/folder/_headers.scss

h1 { 
    background-color: $headers-bg; 
} 

package.json (pro Anfrage)

{ 
    "name": "my-app", 
    "version": "0.0.0", 
    "license": "MIT", 
    "angular-cli": {}, 
    "scripts": { 
    "start": "ng server", 
    "postinstall": "typings install", 
    "lint": "tslint \"src/**/*.ts\"", 
    "test": "ng test", 
    "pree2e": "webdriver-manager update", 
    "e2e": "protractor" 
    }, 
    "private": true, 
    "dependencies": { 
    "@angular/common": "2.0.0-rc.1", 
    "@angular/compiler": "2.0.0-rc.1", 
    "@angular/core": "2.0.0-rc.1", 
    "@angular/http": "2.0.0-rc.1", 
    "@angular/platform-browser": "2.0.0-rc.1", 
    "@angular/platform-browser-dynamic": "2.0.0-rc.1", 
    "@angular/router": "2.0.0-rc.1", 
    "es6-shim": "^0.35.0", 
    "reflect-metadata": "0.1.3", 
    "rxjs": "5.0.0-beta.6", 
    "systemjs": "0.19.26", 
    "zone.js": "^0.6.12" 
    }, 
    "devDependencies": { 
    "angular-cli": "^1.0.0-beta.5", 
    "codelyzer": "0.0.19", 
    "ember-cli-inject-live-reload": "^1.4.0", 
    "jasmine-core": "^2.4.1", 
    "jasmine-spec-reporter": "^2.4.0", 
    "karma": "^0.13.15", 
    "karma-chrome-launcher": "^0.2.3", 
    "karma-jasmine": "^0.3.8", 
    "node-sass": "^3.7.0", 
    "protractor": "^3.3.0", 
    "ts-node": "^0.5.5", 
    "tslint": "^3.6.0", 
    "typescript": "^1.8.10", 
    "typings": "^0.8.1" 
    } 
} 

Leider schlägt der Build, weil sie nicht weiß, was $ bg ist.

Build failed. 
File: /my-app/tmp/sassplugin-input_base_path-jFTXlfed.tmp/0/ 
src/app/styles/folder/_more.scss (2) 
The Broccoli Plugin: [SASSPlugin] failed with: 
Error: Undefined variable: "$headers-bg". 

Was fehlt mir? Es ist, als ob der Compiler das normale Verhalten des Ignorierens der "_" 'd Dateinamen nicht respektiert.

Answer 1

Nachdem ich den Quellcode gelesen hatte, fand ich diesen 17 Tage alten Commit.

Ich hatte recht in meiner anfänglichen Ahnung, dass es Teiltöne nicht ignoriert hat. Im Grunde müssen Sie dem SassCompiler sagen, dass er sie ignorieren soll.

Hier ist, wie:

sassCompiler: { 
    cacheExclude: [/\/_[^\/]+$/] 
} 

https://github.com/angular/angular-cli/commit/6b45099b6a277ecd7a57f2d2e632bf40af774879

Answer 2

Sie haben die Dinge ein wenig nach hinten, wie Sie in einem Stil importieren und nicht Ihre Variable importieren ... finden Sie in diesem Beispiel als Leitfaden ...

Ihre Variablen definieren:

_variables. SCSS

$bg: #ababab; 

sie verwenden: site.scss

@import '_variables'; 
body { 
    background: $bg; 
}