adopted-ember-addons / ember-cli-sass Goto Github PK

In the last CLI update, the sass compiler started tripping over embedded fonts:

@font-face
{
    font-family: OpenSansBold;
    font-weight: normal;
    font-style: normal;
    src: url(data:font/ttf;base64,AAEAAAATAQAABAAwRFNJR5IYdDoAA1fcAAAVdEdERUYAJgOvAANTvAAAAB5HUE9TCzcPNwADU9wAAAA4R1NVQg4rPbcAA1QUAAADxk9TLzKidaEYAAABuAAAAGBjbWFwKasvaAAAELQAAAQaY3Z0IBMtGpQAAB2oAAAAqmZwZ227c6R1AAAU0AAAB+BnYXNwAAgAGwADU7AAAAAMZ2x5Zh1/yvQAACWsAAFLxGhlYWT34ccOAAABPAAAADZoaGVhDikKUgAAAXQAAAAkaG10eCTSBgAAAAIYAAAOmmtlcm5UKwl+AAFxcAABtjZsb2NhsttgKwAAHlQAAAdWbWF4cAU1Ah8AAAGYAAAAIG5hbWW8ZnsiAAMnqAAABdxwb3N0AkPvbAADLYQAACYrcHJlcMgJ/GsAABywAAAA+AABAAAAARmaOqk5s18PPPUACQgAAAAAAMlCF6AAAAAAyehKofsM/agKjQiNAAEACQACAAAAAAAAAAEAAAiN/agAAAqN+wz+eQqNAAEAAAAAAAAAAAAAAAAAAAOjAAEAAAOqAIoAFgBYAAUAAgAQAC8AXAAAAQABCwADAAEAAwUPArwABQAIBZoFMwAAAR8FmgUzAAAD0QBmAfwIAgILCAYDBQQCAgTgAALvQAAgWwAAACgAAAAAMUFTQwAgACD//QYf/hQAhAiNAlggAAGfAAAAAAReBbYAAAAgAAMEzQDBAAAAAAQUAAACFAAAAkoAdQPHAIUFKwAtBJEAWAc1AD8GAABSAiEAhQK2AFICtgA9BFwAPwSRAFgCUgA/ApMAPQJIAHUDTgAOBJEASgSRAHkEkQBOBJEATgSRACMEkQBkBJEASASRADcEkQBIBJEAQgJIAHUCUgA/BJEAWASRAFgEkQBYA9EABgctAGYFhQAABWAAuAUZAHcF7AC4BHsAuARkALgFywB3Bh8AuAMdAEICpv9oBVAAuASFALgHiwC4BoEAuAZeAHcFBgC4Bl4AdwVIALgEaABeBKIAKQYMAK4FMwAAB7wAAAVWAAAE/gAABKIAMQKmAI8DTgAMAqYAMwRCAAgDSv/8BNsBTATVAFYFEACgBB0AXAUQAFwEugBcAxkAKQSFAAYFQgCgAnEAkwJx/30E9gCgAnEAoAfbAKAFQgCgBPQAXAUQAKAFEABcA6IAoAP6AFwDeQAvBUIAmgSNAAAG2QAUBKAACgSNAAAD5wA3AycAHwRoAccDJwBSBJEAWAIUAAACSgB1BJEAjwSRAFIEkQBxBJEABgRoAccD4wBqBNsBFwaoAGQDEAAvBOwAUgSRAFgCkwA9BqgAZAQA//oDbQBcBJEAWAMIAC8DCAA7BNsBTAVIAKAFPQBxAkgAdQGk/9sDCABcAxsAOQTsAFIHDAAuBwwALgcMAFoD0QA9BYUAAAWFAAAFhQAABYUAAAWFAAAFhQAAB54AAAUZAHcEewC4BHsAuAR7AK8EewC4Ax0AKgMdAEIDHf/cAx0AOQXsAC8GgQC4Bl4AdwZeAHcGXgB3Bl4AdwZeAHcEkQCBBl4AdwYMAK4GDACuBgwArgYMAK4E/gAABQYAuAWwAKAE1QBWBNUAVgTVAFYE1QBWBNUAVgTVAFYHVgBWBB0AXAS6AFwEugBcBLoAXAS6AFwCcf+bAnEAkQJx/4YCcf/jBPQAXAVCAKAE9ABcBPQAXAT0AFwE9ABcBPQAXASRAFgE9ABcBUIAmgVCAJoFQgCaBUIAmgSNAAAFEACgBI0AAAWFAAAE1QBWBYUAAATVAFYFhQAABNUAVgUZAHcEHQBcBRkAdwQdAFwFGQB3BB0AXAUZAHcEHQBcBewAuAUQAFwF7AAvBTEAXAR7ALgEugBcBHsAuAS6AFwEewC4BLoAXAR7ALgEugBcBHsArwS6AFwFywB3BIUABgXLAHcEhQAGBcsAdwSFAAYFywB3BIUABgYfALgFQgCgBh8AAAVCAAQDHf/xAnH/mwMdAD8Ccf/pAx0ABwJx/68DHQBCAnEAKwMdAEICcQCgBcMAQgS6AJMCpv9oAnH/fQVQALgE9gCgBPYAoASFALgCcQCgBIUAuAJxAGMEhQC4AnEAoASFALgDbQCgBIUAAgKkAAAGgQC4BUIAoAaBALgFQgCgBoEAuAVCAKAGOwAGBoEAuAVCAKAGXgB3BPQAXAZeAHcE9ABcBl4AdwT0AFwHyQB3B9MAXAVIALgDogCgBUgAuAOiAGMFSAC4A6IAUwRoAF4D+gBcBGgAXgP6AFwEaABeA/oAXARoAF4D+gBcBKIAKQN5AC8EogApA3kALwSiACkDeQAvBgwArgVCAJoGDACuBUIAmgYMAK4FQgCaBgwArgVCAJoGDACuBUIAmgYMAK4FQgCaB7wAAAbZABQE/gAABI0AAAT+AAAEogAx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
}

If I comment out the URL, it works. Otherwise it throws "expected a variable name (e.g. $x) or ')' for the parameter list for url"

Thanks for the awesome open source work! I'm migrating to ember-cli and have been looking for something that will help me migrate all the scss work I've got thus far. 3 questions for you

1. does this also pull in multiple files or do I need a single scss file for it to work?
2. I assume I can still work w/out bower installed foundation (like you show). If I want to concat a standalone css file + the scss output as css -how would I go about it?
3. do you have a small/living example of this to see it in action?

Hello

I'm trying to set the includePaths for bootstrap-sass-official but I can't seem to get it to work. I'm not sure what I'm doing wrong.

The Bootstrap SCSS files are in bower_components/bootstrap-sass-official/assets/stylesheets.

[max@terror ramsch-ember]$ ls -l bower_components/bootstrap-sass-official/assets/stylesheets
total 20
drwxr-xr-x 3 max users 4096 15.12.2014 02:15 bootstrap/
-rw-r--r-- 1 max users  141 12.11.2014 18:19 _bootstrap-compass.scss
-rw-r--r-- 1 max users  720 12.11.2014 18:19 _bootstrap-mincer.scss
-rw-r--r-- 1 max users 1316 12.11.2014 18:19 _bootstrap.scss
-rw-r--r-- 1 max users  131 12.11.2014 18:19 _bootstrap-sprockets.scss 

So I 've added the options as follows:

var App = Ember.Application.extend({
  ...
  sassOptions: {
    includePaths: [
      'bower_components/bootstrap-sass-official/assets/stylesheets'
    ]
  }
});

And I try to include it in SCSS as follows:

@import "bootstrap/variables";
@import "bootstrap";

But that gives me an error in ember-cli:

Error: /home/max/projects/ramsch-ember/tmp/tree_merger-tmp_dest_dir-EHcg5Cac.tmp/app/styles/app.scss:3: file to import not found or unreadable: "bootstrap/variables"

If I remove @import "bootstrap/variables"; the same happens with just bootstrap.

I have to include it using the full path in order to make it work:

@import "bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/variables";
@import "bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap";

So I'm assuming that there's a probem with includePaths.

Do you have an idea what I might be doing wrong?

Hey,

If some of you getting error using bootstrap-sass, it's a problem in node-sass / sasslib.

You can use [email protected] until the'll fix the problem.

Cheers.

The current beta5 of node-sass introduced some bugs together with the foundation scss. An issue on the upstream project is open.

This leads to the behavior, that ember-cli does not compile the sccs of foundation anymore, with the following error:

File: bower_components/foundation/scss/foundation/components/_forms.scss (335) expected a variable name (e.g. $x) or ')' for the parameter list for url

To anyone else having this problem:
downgrade your node-sass version in the ember-cli-sass module to beta4 fixes this problem.

Upstream Issues:
sass/libsass#1059
sass/node-sass#840

gpoitch/ember-cli-less#16

As an Ember and Ember-cli user I am a little bit lost how these two packages are different. We used to use https://www.npmjs.com/package/broccoli-sass, but now we came over this addon and I am wondering what are use-cases to use one or another?

I see both of them use node-sass internally. Thanks in advance.

There's no ability to add this to the repo so I'll file here. Broccoli-sass-source-maps relies on node-sass ^3.1.0 and 3.2.0 was released about a month ago.

Can we bump that to ^3.2.0?

@aexmachina ember-cli-sass 3.2.1 depends on broccoli-sass-source-maps 0.6.2, which doesn't seem to exist (the only release/tags I see on that GitHub project are 0.6.0). When I did an npm install on my project, 0.6.2 brought in node-sass 3.0.0-pre. I see that 0.6.0 depends on 3.0.0-alpha.0, which is also not the latest version of node-sass. I would gladly update broccoli-sass-source-maps to depend on 3.0.0-alpha.1, but I'm confused by the lack of a 0.6.2 tag anywhere on the project. Did it get deleted? If so, why is ember-cli-sass dependent on a non-existent version tag?

I am so close to using iojs! Just the last thing, it seems, that keeps it from running:
Installing/building the latest 3.1.0-beta works fone but when running ember serve I get the following error:

version: 0.1.12
Module did not self-register.
Error: Module did not self-register.
    at Error (native)
    at Module.load (module.js:341:32)
    at Function.Module._load (module.js:296:12)
    at Module.require (module.js:351:17)
    at require (module.js:370:17)
    at Object.<anonymous> (project/node_modules/ember-cli-sass/node_modules/broccoli-sass/node_modules/node-sass/lib/index.js:211:15)
    at Module._compile (module.js:446:26)
    at Object.Module._extensions..js (module.js:464:10)
    at Module.load (module.js:341:32)
    at Function.Module._load (module.js:296:12)

Once I remove ember-cli-sass I can start up the server. Any idea what the issue could be? Could it be on the ember-cli side? Or something to do with node-sass?

I'm setting the path in outputPaths as specified in the docs, it was working fine for everything when I was using css, but since I installed foundation-sass and sass compiler, now that parameter is being ignored, and my compiled app.scss is going to /assets/app-name.css Any ideas on how to fix this? Thanks!

When instantiating EmberApp we can change the location of the styles directory. A client application shares styles between multiple ember apps with the following structure:

└── app_1
├── app_2
├── app_3
└── dependencies
    ├── styles

so in each App we declare the styles tree to be:

new EmberApp({
  trees: {
    styles: '../dependencies/styles'
  }
});

This was just fine with a combination of Ember 1.10, ember-cli 0.2, and embrer-cli-sass 2.0.x.

Upgrading everything is broken. My research has shown that ember-cli-sass is trying to verify the existence of style files in ./app/styles regardless of the style tree location override: https://github.com/aexmachina/ember-cli-sass/blob/master/index.js#L36

higher up the food chain ember-cli will Funnel all style trees for the app into app/styles to normalize how everything acts upon it. This would be fine but ember-cli-sass is checking for the existance of this path from the cwd of the project rather than within the tree that is passed in.

At the point of execution that these checks are done the tree has not been run and so there is no directory yet. I realize that this check is done for performance reasons but I would advocate to move this check into the lower level of the Broccoli handling and wait for the tree to be available to act up to check for the existence of files to be acted upon.

If this is agreeable I can write up a PR.

With broccoli-sass and ember-cli 0.1.15, I am able to compile multiple SASS files using the outputPaths configuration as described here: http://www.ember-cli.com/#asset-compilation

When I replace broccoli-sass with ember-cli-sass, this no longer works. I created an example of this here: https://github.com/paulcwatts/multiple-sass

I have the configuration:

var app = new EmberApp({
  outputPaths: {
    app: {
      css: {
        'app': '/assets/multiple.css',
        'b': '/assets/b.css'
      }
    }
  }
});

The master branch uses broccoli-sass, and the ember-cli-sass branch uses ember-cli-sass. If you build with master, you will only get two compiled CSS files: "multiple.css" and "b.css". However, in the ember-cli-sass branch, you only get "multiple-sass.css" files.

How can I configure ember-cli-sass to not create sourcemap(s) for production environment? Is that currently possible?

I attempted to import a file called "_colors.scss" into my app.scss manifest with @import "colors";

In my _colors.scss partial I have a color varible defined as:
$blue_1: #527D9D;

When I try to use that variable the ember-cli build fails with the error Undefined variable: "$blue-1".

The SASS documentation states - "For historical reasons, variable names (and all other Sass identifiers) can use hyphens and underscores interchangeably. For example, if you define a variable called $main-width, you can access it as $main_width, and vice versa."

Is there some config property that needs to be set that allows you to use _ and - interchangebly? or to stop the compiler from converting my _'s to -'s?

Thanks in advance

I’m using your plugin and had a question - is there a way to produce app.css and vendor.css?

For example I want to put all the bootstrap scss into vendor.css and my app scss into app.scss...

Right now my ember-cli app serves a single css file that appears to be the app.scss -transformed. I do have foundation in my bower_components dir but it doesn't appear to be included when I host the app and hit it from the browser.

Can you confirm this works as expected w/ the latest 0.1.3 of ember-cli?

https://github.com/aexmachina/ember-cli-sass/blob/master/index.js#L18

var EmberApp = require('ember-cli/lib/broccoli/ember-app');

var app = new EmberApp({
  sassOptions: {
    includePaths: [
      'bower_components/foundation/scss'
    ]
  }
});

Trying to install into a fresh project (using both ember install and npm install) results in:

npm ERR! Darwin 14.3.0
npm ERR! argv "node" "/Users/daw/.nvm/versions/node/v0.12.2/bin/npm" "install" "[email protected]"
npm ERR! node v0.12.2
npm ERR! npm  v2.7.3
npm ERR! code ETARGET

npm ERR! notarget No compatible version found: node-sass@'>=3.0.0 <4.0.0'
npm ERR! notarget Valid install targets:
npm ERR! notarget ["0.9.4-rc1","0.2.0","0.2.1","0.2.2","0.2.3","0.2.4","0.2.5","0.2.6","0.3.0","0.4.0","0.4.1","0.4.2","0.4.3","0.4.4","0.5.0","0.5.1","0.5.2","0.5.3","0.5.4","0.6.0","0.6.1","0.6.2","0.6.3","0.6.4","0.6.5","0.6.6","0.6.7","0.7.0-alpha","0.7.0","0.8.0","0.8.1","0.8.2","0.8.3","0.8.4","0.8.5","0.8.6","0.9.0","0.9.1","0.9.2","0.9.3","0.9.4-rc1","0.9.4","0.9.5-rc1","0.9.5","0.9.6","1.0.0","1.0.1","1.0.2-alpha","1.0.2","1.0.3","1.1.0","1.1.1","1.1.2","1.1.3","1.1.4","1.2.0","1.2.1","1.2.2","1.2.3","2.0.0-beta","2.0.0","2.0.1","3.0.0-alpha.0","3.0.0-beta.2","3.0.0-beta.3","3.0.0-beta.4","2.1.0","2.1.1","3.0.0-beta.5"]
npm ERR! notarget
npm ERR! notarget This is most likely not a problem with npm itself.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
npm ERR! notarget
npm ERR! notarget It was specified as a dependency of 'ember-cli-sass'
npm ERR! notarget

Looking at node-sass, it looks like 2.1.1 is the latest release, but this package depends on broccoli-sass-source-maps, which depends on node-sass ^3.0.0 as a peer dependency.

Not sure how that's possible, perhaps node-sass unpublished a node package?

When I try to build ember-cli-sass in io.js, I get this error:

> [email protected] install /Users/danielfinlay/Documents/Development/Issue Tracker/Raincheck/node_modules/ember-cli-sass/node_modules/broccoli-sass/node_modules/node-sass
> node build.js

child_process: customFds option is deprecated, use stdio instead.
child_process: customFds option is deprecated, use stdio instead.
  CXX(target) Release/obj.target/binding/binding.o
In file included from ../binding.cpp:1:
../node_modules/nan/nan.h:481:19: error: no type named 'ExternalAsciiStringResource' in 'v8::String'; did you mean 'ExternalStringResource'?
      v8::String::ExternalAsciiStringResource *resource) {
      ~~~~~~~~~~~~^~~~~~~~~~~~~~~~~~~~~~~~~~~
                  ExternalStringResource
/Users/danielfinlay/.node-gyp/1.2.0/deps/v8/include/v8.h:2016:19: note: 'ExternalStringResource' declared here
  class V8_EXPORT ExternalStringResource
                  ^
In file included from ../binding.cpp:1:
../node_modules/nan/nan.h:480:36: error: redefinition of 'NanNew'
  NAN_INLINE v8::Local<v8::String> NanNew(
                                   ^
../node_modules/nan/nan.h:475:36: note: previous definition is here
  NAN_INLINE v8::Local<v8::String> NanNew(
                                   ^
../node_modules/nan/nan.h:2103:12: error: no member named 'IsExternalAscii' in 'v8::String'; did you mean 'IsExternal'?
  if (str->IsExternalAscii()) {
           ^~~~~~~~~~~~~~~
           IsExternal
/Users/danielfinlay/.node-gyp/1.2.0/deps/v8/include/v8.h:1980:8: note: 'IsExternal' declared here
  bool IsExternal() const;
       ^
In file included from ../binding.cpp:1:
../node_modules/nan/nan.h:2104:23: error: no type named 'ExternalAsciiStringResource' in 'v8::String'; did you mean 'ExternalStringResource'?
    const v8::String::ExternalAsciiStringResource* ext;
          ~~~~~~~~~~~~^~~~~~~~~~~~~~~~~~~~~~~~~~~
                      ExternalStringResource
/Users/danielfinlay/.node-gyp/1.2.0/deps/v8/include/v8.h:2016:19: note: 'ExternalStringResource' declared here
  class V8_EXPORT ExternalStringResource
                  ^
In file included from ../binding.cpp:1:
../node_modules/nan/nan.h:2105:16: error: no member named 'GetExternalAsciiStringResource' in 'v8::String'; did you mean 'GetExternalOneByteStringResource'?
    ext = str->GetExternalAsciiStringResource();
               ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
               GetExternalOneByteStringResource
/Users/danielfinlay/.node-gyp/1.2.0/deps/v8/include/v8.h:2083:40: note: 'GetExternalOneByteStringResource' declared here
  const ExternalOneByteStringResource* GetExternalOneByteStringResource() const;
                                       ^
In file included from ../binding.cpp:1:
../node_modules/nan/nan.h:2105:9: error: assigning to 'const v8::String::ExternalStringResource *' from incompatible type 'const v8::String::ExternalOneByteStringResource *'
    ext = str->GetExternalAsciiStringResource();
        ^ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
../node_modules/nan/nan.h:2106:11: error: assigning to 'const char *' from incompatible type 'const uint16_t *' (aka 'const unsigned short *')
    *data = ext->data();
          ^ ~~~~~~~~~~~
7 errors generated.
make: *** [Release/obj.target/binding/binding.o] Error 1
gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:267:23)
gyp ERR! stack     at emitTwo (events.js:85:13)
gyp ERR! stack     at ChildProcess.emit (events.js:153:7)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (child_process.js:1044:12)
gyp ERR! System Darwin 14.0.0
gyp ERR! command "node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"

After including node-neat and when using this...

var app = new EmberApp({
  sassOptions: {
    includePaths: require('node-neat').includePaths
  }
});

I get seg faults when trying to access these from my scss file...

@import "bourbon/bourbon";
@import "neat-helpers";
@import "neat/neat";

Serving on http://0.0.0.0:4200
Segmentation fault: 11

Any trick to getting this to work with the CLI?

An app I'm working on is attempting to install broccoli-sass-source-maps, seemingly as a dependency of ember-cli-sass 3.3.0 (it's referencing "^3.2.2" in package.json), and the install is failing with the following error:

npm ERR! notarget No compatible version found: broccoli-sass-source-maps@'>=0.7.0 <0.8.0'
npm ERR! notarget Valid install targets:
npm ERR! notarget ["0.6.2","0.6.3","1.0.0-beta.1","1.0.0-beta.4"]

I tried this initially on a brand new DigitalOcean droplet, so I don't think caching is an issue. Have also tried the same on my local machine, and am seeing the same error.

I'm fairly new to node, so I'm unsure if this is just an oversight in publishing a package to npm, or if that's even a thing. Let me know if you need any more info from me.

I am running on ember-cli 0.1.12 and just tried 3.1.0-beta4 and getting the error

File: project/tmp/tree_merger-tmp_dest_dir-Wf2Du1Zo.tmp/app/styles/_settings.scss (58)
file to import not found or unreadable: foundation/functions
Current dir: project/tmp/tree_merger-tmp_dest_dir-Wf2Du1Zo.tmp/app/styles/

If I go back to 3.1.0-beta it works just fine.

I've followed the instructions in the README for creating an addon with an included addon.scss file, but no matter what I do, the styles are not getting picked up by vendor.css.

Is there anything more we need to know in order to make this work?

AS an aside: addon.css is definitely getting picked up.

When I try to install your addon on a linux machine, I get errors:

Any ideas?

I have a new ember-cli 0.2.2 app. I've tried setting sassOptions in the EmberApp constructor like so:

var app = new EmberApp({
  sassOptions: {
    includePaths: [
      'app/styles/foo'
    ]
  }
});

The includePaths never make it into the SassCompiler. As best I can tell it's because ember-cli-sass's setupPreprocessorRegistry is called independently of included. So this.app is never set causing sassOptions to not pick up the app's options.

I'm aware this isn't the recommended way to define includePaths. I started debugging this because I'm developing an ember add-on that needs to add to the includePaths. I'm all ears if there's a better way to do that outside of modifying the host app's app.options.sassOptions.

In any case, it'd be great if ember-cli-sass can continue to support the old config style if only for compatibility.

version: 0.0.40
Cannot read property 'outputFile' of undefinedTypeError: Cannot read property 'outputFile' of undefined
at EmberCLISASS.included (/Users/michael/Documents/rubywork/ishop/ember/node_modules/ember-cli-sass/index.js:33:31)
at EmberApp. (/Users/michael/Documents/rubywork/ishop/ember/node_modules/ember-cli/lib/broccoli/ember-app.js:172:13)
at Array.forEach (native)
at EmberApp._notifyAddonIncluded (/Users/michael/Documents/rubywork/ishop/ember/node_modules/ember-cli/lib/broccoli/ember-app.js:170:23)
at new EmberApp (/Users/michael/Documents/rubywork/ishop/ember/node_modules/ember-cli/lib/broccoli/ember-app.js:165:8)
at Object. (/Users/michael/Documents/rubywork/ishop/ember/Brocfile.js:5:11)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)

As I see it, the README.md doesn't require sassOptions must be provided even if I just want the default value.

So maybe we should provide the default value when user add this property.
Or we should make it clear in README.md.

Thank you.

I realize the README says to configure this addon using the Brocfile like so ...

var app = new EmberApp({
  outputPaths: {
    app: {
      css: {
        'app': '/assets/application-name.css',
        'themes/alpha': '/assets/themes/alpha.css'
      }
    }
  }
});

But most of my modern ember-cli apps use the config/environment file instead like so

module.exports = function(environment) {
  var ENV = {
  //tons of other configuration ...

  ENV.sassOptions = {
      includePaths: [
          'bower_components/foundation/scss',
          'app/styles'
      ]
  };

  return ENV;
};

How should we configure using this to build a single app.css / and if I'm using the config example ... how should I configure it to output both app.css and another file (at the same time) ?

Getting this:
npm install ember-cli-sass --save-dev
npm ERR! fetch failed https://registry.npmjs.org/center-align/-/center-align-0.1.1.tgz
npm WARN retry will retry, error on last attempt: Error: getaddrinfo ENOTFOUND registry.npmjs.org
npm ERR! fetch failed https://registry.npmjs.org/async/-/async-1.2.1.tgz
npm WARN retry will retry, error on last attempt: Error: connect ETIMEDOUT
...
npm keeps spinning forever.. is it just me?

Hey there I was wondering, how do I import something like susy (http://susy.oddbird.net/) into the scss. It is installed using gem install susy. I used to be able place @import "susy"; in my scss code and it would import the ruby package. I mean I have been able to load bower scss partials in just fine but not ruby packages.

I don't know if there's anything we can do in this addon, but my build is extremely slow for building sass:

Right now, my sass builds takes > 20 seconds on each save. It would be nice to only incur that delay when I change styles. I think the biggest thing is that we recompile all the sass anytime any of the files change. Is there a way to only rebuild when something in app/styles changes?

Cold Build:

Build successful - 51632ms.

Slowest Trees                                 | Total
----------------------------------------------+---------------------
SassCompiler                                  | 20416ms
Babel                                         | 7292ms
Babel                                         | 4652ms
CoffeeScriptFilter                            | 2922ms
ES6: App Tree                                 | 2773ms

Slowest Trees (cumulative)                    | Total (avg)
----------------------------------------------+---------------------
SassCompiler (1)                              | 20416ms
Babel (8)                                     | 12836ms (1604 ms)
CoffeeScriptFilter (2)                        | 4721ms (2360 ms)
ES6: App Tree (1)                             | 2773ms

Subsequent:

file changed adapters/customer.coffee

Build successful - 25769ms.

Slowest Trees                                 | Total
----------------------------------------------+---------------------
SassCompiler                                  | 20473ms

Slowest Trees (cumulative)                    | Total (avg)
----------------------------------------------+---------------------
SassCompiler (1)                              | 20473ms

#40 and #43 are both a result of the [email protected] versions. I think that broccoli-sass should have gone to v1.0.0-beta-x version when it was upgraded to node-sass v3, but this didn't happen (and so I followed suit with ember-cli and broccoli-sass-source-maps). I now think this was a mistake, because several users have had to deal with failing builds without explicitly asking for a new version (see #40 and #43).

Here's what I've done to sort this out:

• [email protected] has reverted back to [email protected]
• [email protected] uses [email protected]
• [email protected] now uses [email protected] via [email protected]
• [email protected] uses [email protected] via [email protected]

Please let me know if you're experiencing any issues with this. Hopefully this should allow people who want node-sass v3 to use the betas, and the rest of the world will just get a SASS compiler that works :)

I've been getting segmentation faults whenever I try to import scss files that have syntax errors in them. So far, I've been assiduous about linting sass, but now I'm trying to import Foundation, which would be a pain to lint.

Is this a known issue possibly related to this: sass/node-sass#20?

According to that issue, the problem traces back to an XCode setting in node-sass's binding.gyp. But searching through the dependencies in my version of ember-cli-sass, the setting is there. So not sure what could be causing this.

❯ ember s                             
version: 0.2.0-beta.1
Cannot read property 'options' of undefined
TypeError: Cannot read property 'options' of undefined
    at Class.module.exports.sassOptions (/home/pedro/Finesce/code/floorplan_editor/node_modules/ember-cli-sass/index.js:34:17)
    at Class.module.exports.setupPreprocessorRegistry (/home/pedro/Finesce/code/floorplan_editor/node_modules/ember-cli-sass/index.js:45:45)
    at Object.module.exports.setupRegistry (/home/pedro/Finesce/code/floorplan_editor/node_modules/ember-cli/lib/preprocessors.js:43:16)
    at Class.Addon (/home/pedro/Finesce/code/floorplan_editor/node_modules/ember-cli/lib/models/addon.js:81:5)
    at new Class (/home/pedro/Finesce/code/floorplan_editor/node_modules/ember-cli/node_modules/core-object/core-object.js:16:17)
    at /home/pedro/Finesce/code/floorplan_editor/node_modules/ember-cli/lib/models/addons-factory.js:44:19
    at visit (/home/pedro/Finesce/code/floorplan_editor/node_modules/ember-cli/lib/utilities/DAG.js:23:3)
    at DAG.topsort (/home/pedro/Finesce/code/floorplan_editor/node_modules/ember-cli/lib/utilities/DAG.js:82:7)
    at AddonsFactory.initializeAddons (/home/pedro/Finesce/code/floorplan_editor/node_modules/ember-cli/lib/models/addons-factory.js:40:9)
    at Project.initializeAddons (/home/pedro/Finesce/code/floorplan_editor/node_modules/ember-cli/lib/models/project.js:310:36)

Thisis the line causing problems

Re-opening the issue described here: #9

When I load up my ember app I receive the following error in my console:

Failed to load resource: the server responded with a status of 404 (Not Found): http://localhost:4200/tree_merger-tmp_dest_dir-phbyksAc.tmp/app/styles/****-store.css.map

I have the following in my package.json file:

{
  "name": "spark-store",
  "version": "0.0.0",
  "private": true,
  "directories": {
    "doc": "doc",
    "test": "tests"
  },
  "scripts": {
    "start": "ember server",
    "build": "ember build",
    "test": "ember test"
  },
  "repository": "https://github.com/stefanpenner/ember-cli",
  "engines": {
    "node": ">= 0.10.0"
  },
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "body-parser": "^1.2.0",
    "broccoli-asset-rev": "0.3.0",
    "broccoli-ember-hbs-template-compiler": "^1.6.1",
    "ember-cli": "0.1.1",
    "ember-cli-content-security-policy": "0.1.4",
    "ember-cli-ic-ajax": "0.1.1",
    "ember-cli-inject-live-reload": "^1.2.2",
    "ember-cli-qunit": "0.1.0",
    "ember-data": "1.0.0-beta.10",
    "express": "^4.8.5",
    "glob": "^4.0.5",
    "ember-cli-ember-data": "~0.2.0",
    "ember-cli-sass": "^2.0.1"
  }
}

And here is my Brocfile:

/* global require, module */

var EmberApp = require('ember-cli/lib/broccoli/ember-app');

var app = new EmberApp({
  sassOptions: {
    includePaths: [
      'bower_components/bourbon/dist',
      'bower_components/neat/app/assets/stylesheets',
      'bower_components/ionicons/scss'
    ]
  }
});

// Use `app.import` to add additional libraries to the generated
// output files.
app.import('app/styles/normalize.css');
app.import('vendor/modernizr/modernizr.js');
// If you need to use different assets in different
// environments, specify an object as the first parameter. That
// object's keys should be the environment name and the values
// should be the asset to use in that environment.
//
// If the library that you are including contains AMD or ES6
// modules that you would like to import into your application
// please specify an object with the list of modules as keys
// along with the exports of each module as its value.

module.exports = app.toTree();

Any idea what's going on?

According to the foundation-apps 1.1 changelog (https://github.com/zurb/foundation-apps/releases) it is completely libsass compatible, but I am getting the following error which is only mildly useful:

File: bower_components/foundation-apps/scss/vendor/_normalize.scss (288)
invalid top-level expression
Error: invalid top-level expression
    at options.error (projects/client/node_modules/ember-cli-sass/node_modules/broccoli-sass-source-maps/node_modules/node-sass/lib/index.js:261:32)

Does that mean the error is in line 288 of _normalize.scss? This would be the following:

button, /* line 288 */
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}

Still looking into it, if I can fix it/find a workaround but just wanted to report it.

If I just wanted to simply use scss for my addon testing directory tests/dummy/app/styles/app.scss you can not currently do this as of the beta.6 release without including an empty app/styles/app.scss file.

Thoughts?

ember-cli 2.2.2
ember 1.12 b1

Build failed.
File: bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/_forms.scss (189)
You may not @extend an outer selector from within @media.
You may only @extend selectors within the same directive.
From "@extend .input-sm" on line 48 of bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/_input-groups.scss

Works if I switch to "broccoli-sass": "git://github.com/ef4/broccoli-sass" but this doesnt have a sourceMap option.

Hey,

it would be nicer if it defaulted to {{project}}.css just like ember-cli (with simply brocolli-sass too) does.

That way ember-cli-sass would be a drop-in replacement without further adjustments needed.

BR,
Domme

What ist the difference?

If possible, please release the latest version to npm.

I was using this plugin with ember-cli v0.40 and it worked great. I just updated to ember-cli v0.46 and now get the following error:

Error: File not found: /app/styles/app.scss
in any of the following include paths:
  tmp/sass_compiler-tmp_dest_dir-5Bg2iW5S.tmp
    at Object.findFileSync (/Users/dave/Documents/projects/dogs/node_modules/ember-cli-sass/node_modules/broccoli-sass/node_modules/include-path-searcher/index.js:12:9)
    at /Users/dave/Documents/projects/dogs/node_modules/ember-cli-sass/node_modules/broccoli-sass/index.js:38:35
    at $$$internal$$tryCatch (/Users/dave/Documents/projects/dogs/node_modules/ember-cli-sass/node_modules/broccoli-sass/node_modules/rsvp/dist/rsvp.js:470:16)
    at $$$internal$$invokeCallback (/Users/dave/Documents/projects/dogs/node_modules/ember-cli-sass/node_modules/broccoli-sass/node_modules/rsvp/dist/rsvp.js:482:17)
    at $$$internal$$publish (/Users/dave/Documents/projects/dogs/node_modules/ember-cli-sass/node_modules/broccoli-sass/node_modules/rsvp/dist/rsvp.js:453:11)
    at $$rsvp$asap$$flush (/Users/dave/Documents/projects/dogs/node_modules/ember-cli-sass/node_modules/broccoli-sass/node_modules/rsvp/dist/rsvp.js:1531:9)
    at process._tickCallback (node.js:419:13)

I replicated on a new app:

ember new dogs
cd dogs
mv app/styles/app.css app/styles/app.scss
npm install --save-dev broccoli-sass
npm install --save-dev ember-cli-sass
ember server

Thoughts? By the way thanks for this plugin, sourceMaps is awesome.

After following the helpful advice from @aexmachina in the broccoli-sass issue joliss/broccoli-sass#18 which details creating/mapping local filesystem directories and files in the Chrome workspace, I feel like I'm really close to the solution but I'm having one remaining issue.

The SourceMappingURL generated at the bottom of my app's output css file seems to need an extra 'tmp' in the URL reference. After creating a network mapping from the network file assets/my-app.css to temporary filesystem file (in the workspace) at my-app/tmp/tree_merger-tmp_dest_dir-eJSNaSPW.tmp/app/styles/my-app.css, the GET request for the mapping file that returns a 404 is to the URL http://localhost:4200/tree_merger-tmp_dest_dir-eJSNaSPW.tmp/app/styles/my-app.css.map.

Maybe the SourceMappingURL at the bottom should be something like /*# sourceMappingURL=../../tmp/tree_merger-tmp_dest_dir-eJSNaSPW.tmp/app/styles/my-app.css.map */ instead of /*# sourceMappingURL=../../tree_merger-tmp_dest_dir-eJSNaSPW.tmp/app/styles/my-app.css.map */ ? Or is there another way I could map my directory structure/change input/output file paths to better fit this?

Receiving the following error:
unordered_map::at: key not found

have the following in my environment.js:
sassOptions: {
includePaths: [
'bower_components/neat/app/assets/stylesheets/',
'bower_components/bourbon/app/assets/stylesheets/'
]
}

@if compass-env()=='development' {
    @import "bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap";
}

That seems to be the common way in SCSS to add conditional logic, but currently doesn't appear to do anything. Could you add a function (ember-env or just env?) to allow a different SCSS on each environment.

Thanks

I've just installed and created app/styles/app.scss, but when I start with ember server the .css file is not created. Is there any other set up I need, other than npm install --save-dev ember-cli-sass?

Is there a way to output exactly what's happening in the build process so that I can debug it?

Hey,

although the css lines are properly matched to the scss files and lines it's not possible to view the .scss at the matched position.

The source map points the browser to urls like:
http://0.0.0.0:4200/assets/tmp/tree_merger-tmp_dest_dir-ipPMXqqo.tmp//app/styles/app.scss
... which are not available from the server.

Thanks for the great work already, you're making my designer really happy! 👍

BR,
Domme

Getting:

module.js:355
  Module._extensions[extension](this, filename);
                               ^
Error: Module did not self-register.
    at Error (native)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/private/tmp/blap/node_modules/ember-cli-sass/node_modules/broccoli-sass/node_modules/node-sass/lib/index.js:181:15)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
[email protected] postinstall: `node scripts/build.js`
Exit status 1
Error: [email protected] postinstall: `node scripts/build.js`
Exit status 1
    at EventEmitter.<anonymous> (/private/tmp/blap/node_modules/ember-cli/node_modules/npm/lib/utils/lifecycle.js:213:16)
    at EventEmitter.emit (events.js:110:17)
    at ChildProcess.<anonymous> (/private/tmp/blap/node_modules/ember-cli/node_modules/npm/lib/utils/spawn.js:14:12)
    at ChildProcess.emit (events.js:110:17)
    at maybeClose (child_process.js:1008:16)
    at Process.ChildProcess._handle.onexit (child_process.js:1080:5)

Hello,

Thanks for the add-on, makes life easier.

I'm getting a 404 on the map file, do you know what might be going on? Here's the error (sff is my app's name): Cannot GET /tree_merger-tmp_dest_dir-QOjYyRtz.tmp/app/styles/sff.css.map

Thanks.

I'm using Bourbon's linear-gradient mixin and ember-cli-sass is generating incorrect css. I provide the following input:

%some-color { 
  @include linear-gradient(to bottom, #151A20 0%, #0B0E11 100%);
}

.my-class {
  @extend %some-color
}

and I receive the following output from ember-cli-sass:

.my-class {
  background-image: linear-gradient(to bottom,#151A20 0%, #0B0E11 100%, , , , , , , , ); }

whereas compiling with sass 3.4.13 running on ruby gives the correct css:

.my-class {
  background-image: linear-gradient(to bottom,#151A20 0%, #0B0E11 100%); }

I have tried setting the sassOptions as follows in my app.js but importing from bower_components doesn't seem to work:

  sassOptions: {
    includePaths: ['vendor', 'bower_components']
  }

Explicitly importing as follows does work:
@import 'bower_components/normalize-scss/normalize';

Any ideas?