Angular2 - sass unable to build on angular-cli

Question

I'm trying to use SASS with angular-cli. I've read the docs and found other SO q/a's that talk about setting it up...but it keeps failing the build.

Here's my setup:

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 (per request)

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

Unfortunately, the build fails because it doesn't know what $bg is.

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

What am I missing? Its as if the compiler isn't respecting the normal behavior of ignoring the "_"'d file names.

Added. I haven't added anything to package.json, other than to install node-sass, per the readme instructions. — D_Naish
– D_Naish, Commented Jun 2, 2016 at 11:48

D_Naish · Accepted Answer · 2016-06-03 02:08:58Z

2

After reading through the source code, I found this 17 day old commit.

I was right in my initial hunch that it wasn't ignoring partials. Basically, you have to tell the sassCompiler that you want it to ignore them.

Here's how:

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

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

edited Jun 3, 2016 at 2:08

answered Jun 2, 2016 at 18:58

D_Naish

5534 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

hackp0int Over a year ago

I would like it not to copy the empty file to dist

D_Naish Over a year ago

Make sure you've got the most recent version of angular-cli

Brocco · Accepted Answer · 2016-06-02 15:05:20Z

0

You have things a little backwards as you're importing in a style and not importing your variable... see this example as a guide...

define your variables:

_variables.scss

$bg: #ababab;

use them: site.scss

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

edited Jun 2, 2016 at 15:05

answered Jun 2, 2016 at 14:36

Brocco

65.4k12 gold badges74 silver badges77 bronze badges

1 Comment

D_Naish Over a year ago

I've adjusted the example to further show the issue. If I import both files in the right order into the master.scss, _headers.scss should have access to the variables described in _variables.scss.

Collectives™ on Stack Overflow

Angular2 - sass unable to build on angular-cli

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related