2

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.

2
  • can you please post your package.json file's code
    – pd farhad
    Jun 2, 2016 at 5:36
  • Added. I haven't added anything to package.json, other than to install node-sass, per the readme instructions.
    – D_Naish
    Jun 2, 2016 at 11:48

2 Answers 2

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

2
  • I would like it not to copy the empty file to dist
    – hackp0int
    Jun 14, 2016 at 8:25
  • 1
    Make sure you've got the most recent version of angular-cli
    – D_Naish
    Jun 14, 2016 at 20:48
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;
}
1
  • 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.
    – D_Naish
    Jun 2, 2016 at 15:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.