Angular2 - sass не может построить на angular-cli

Я пытаюсь использовать SASS с angular-cli. Я прочитал документы и нашел другие SO q/a, в которых говорится о его настройке... но он продолжает терпеть неудачу при сборке.

Вот моя установка:

angular-cli-build.js

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

источник/приложение/стили/master.scss

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

источник/приложение/стили/папка/_variables.scss

$headers-bg: #ababab;

источник/приложение/стили/папка/_headers.scss

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

package.json (по запросу)

{
  "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"
  }
}

К сожалению, сборка завершается ошибкой, потому что она не знает, что такое $bg.

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".

Что мне не хватает? Как будто компилятор не соблюдает нормальное поведение, игнорируя имена файлов с символом «_».


javascript angular sass angular-cli broccolijs
person D_Naish    schedule 02.06.2016    source источник
comment
не могли бы вы опубликовать код файла package.json   -  person pd farhad    schedule 02.06.2016
comment
Добавлен. Я ничего не добавлял в package.json, кроме установки node-sass в соответствии с инструкциями readme.   -  person D_Naish    schedule 02.06.2016

Ответы (2)


arrow_upward
2
arrow_downward

Прочитав исходный код, я нашел этот коммит 17-дневной давности.

Я был прав в своем первоначальном предположении, что он не игнорировал частичные. По сути, вы должны сказать sassCompiler, что хотите, чтобы он их игнорировал.

Вот как:

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

https://github.com/angular/angular-cli/commit/6b45099b6a277ecd7a57f2d2e632bf70af774>

person D_Naish    schedule 02.06.2016
comment
Я хотел бы, чтобы он не копировал пустой файл в dist - person IamStalker; 14.06.2016
comment
Убедитесь, что у вас установлена ​​самая последняя версия angular-cli. - person D_Naish; 14.06.2016

arrow_upward
0
arrow_downward

У вас все немного наоборот, поскольку вы импортируете стиль, а не импортируете свою переменную... см. этот пример в качестве руководства...

определите свои переменные:

_variables.scss

$bg: #ababab;

используйте их: site.scss

@import '_variables';
body {
  background: $bg;
}
person Brocco    schedule 02.06.2016
comment
Я скорректировал пример, чтобы лучше показать проблему. Если я импортирую оба файла в правильном порядке в master.scss, _headers.scss должен иметь доступ к переменным, описанным в _variables.scss. - person D_Naish; 02.06.2016