Angular2 - sass 无法在 angular-cli 上构建答案

【问题标题】：Angular2 - sass unable to build on angular-cliAngular2 - sass 无法在 angular-cli 上构建
【发布时间】：2016-06-02 02:18:54
【问题描述】：

我正在尝试将 SASS 与 angular-cli 一起使用。我已经阅读了文档并找到了其他关于设置它的 SO q/a...但它一直在构建失败。

这是我的设置：

angular-cli-build.js

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

src/app/styles/master.scss

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

src/app/styles/folder/_variables.scss

$headers-bg: #ababab;

src/app/styles/folder/_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".

我错过了什么？就好像编译器不尊重忽略“_”文件名的正常行为。

【问题讨论】：

能否请您发布您的 package.json 文件的代码
已添加。根据自述文件的说明，除了安装 node-sass 之外，我没有在 package.json 中添加任何内容。

标签： javascript angular sass broccolijs angular-cli

【解决方案1】：

通读源代码后，我发现了这个 17 天前的提交。

我最初的预感是正确的，它没有忽略部分。基本上，您必须告诉 sassCompiler 您希望它忽略它们。

方法如下：

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

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

【讨论】：

我希望它不要将空文件复制到 dist
确保您拥有最新版本的 angular-cli

【解决方案2】：

当您以样式导入而不是导入变量时，您的情况有些倒退...请参阅此示例作为指南...

定义你的变量：

_variables.scss

$bg: #ababab;

使用它们： site.scss

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

【讨论】：

我已经调整了示例以进一步显示问题。如果我以正确的顺序将这两个文件导入到 master.scss 中，_headers.scss 应该可以访问 _variables.scss 中描述的变量。