How to use SCSS option within Ember CLI App

[neilbaylor]

Hey there

I'm using Ember CLI for my current app.

I would like to be able to use node-sprite-generator to generate SCSS that i can then use from my apps SCSS with either an @extend or an @include:

However, i can't seem to find a way to specify the stylesheetPath to be part of my app (as opposed to within /dist/assets)

Here is my Brocfile

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

var sprite = require('broccoli-sprite');
var spritesTree = sprite('public', {
  src: [ 'images/sprites/**/*.png' ],
  spritePath: 'assets/sprites.png',
  stylesheetPath: 'assets/sprites.css', //i've tried a bunch of stuff here, nothing works
  stylesheet: 'scss', 
  stylesheetOptions: {
    prefix: 'icon-',
    spritePath: '/assets/sprites.png',
    pixelRatio: 2
  },
  layoutOptions: {
    padding: 2
  }
});

module.exports = app.toTree(spritesTree);

Is there a way to do that with this plugin? Do i need to use node-sprite-generator?

Thanks in advance,

[neilbaylor]

Hey again

I've got it working with the following hack

 stylesheetPath: '../../app/styles/components/_sprites.scss',

as i noticed that the brocolli task is using the following directory: MY_WORKING_DIR/tmp/broccoli_sprite-tmp_cache_dir-ee8srq3p.tmp/assets/sprites.png

Any cleaner solution than this?

[bguiz]

Hi Neil,

Sorry to get back to you only after you have figured it out on your own. I'll add some detail that might be relevant:

broccoli-sprite was designed to output CSS sprites. It uses node-sprite-generator in order to do so, which happens to support both CSS output and SCSS output. Thus a hacky workaround like this might get things moving along for you, but it isn't a general solution, and is likely to be fragile.

You might have better luck hacking broccoli-sprite itself. The relvant line of code is: https://github.com/bguiz/broccoli-sprite/blob/90735d22030c2715cbfb8dae623421692051bd30/index.js#L54

Let me know how it goes, and I'm open to getting a patch to solve this issue.

Cheers, Brendan W: http://bguiz.com

On 10 June 2015 at 03:41, Neil Taylor notifications@github.com wrote:

Hey again

I've got it working with the following hack

stylesheetPath: '../../app/styles/components/_sprites.scss',

as i noticed that the brocolli task is using the following directory: MY_WORKING_DIR/tmp/broccoli_sprite-tmp_cache_dir-ee8srq3p.tmp/assets/sprites.png

Any cleaner solution than this?

— Reply to this email directly or view it on GitHub.

[neilbaylor]

Hey Brendan

Thanks for the reply! I should have some time over the next week or so to attempt this - I'm just not sure when.

As an aside, I really think this would be a KILLER upgrade to your plugin for the following reasons:

1. FE best practices are to put sprited icons in :before and :after psuedo elements, which is impossible currently.
2. Even without psuedo elements, the current implementation requires dropping non-semantic classes into your HTML, which is also not ideal.

Thanks again for the reply and i'll let you know what i come with :smiley:

[bguiz]

That does indeed sound like an interesting use case. However, before going down that route, I would suggest first trying out the options exposed by node-sprite-generator, which this broccoli plugin uses to generate sprites.

See:

1. https://github.com/selaux/node-sprite-generator#optionsstylesheet
2. https://github.com/selaux/node-sprite-generator#extending-node-sprite-generator

Essentially the first option is simply to include a template file for the generated SCSS, and that alone is quite likely to meet your requirements. If not, the second option - which is a lot more involved - involves writing functions that allow you more granular control over how the sprite sheets are generated.

Le t me know how it goes!

[nadavshatz]

This has been blocking me as well, I couldn't get the hack to work either. I've tried forking and adding an option to run it before sass so it will be used but haven't been successful so far.

[neilbaylor]

FYI That hack has been reliably working for us, maybe make sure that the relative path is correct For us it's ../..

My generated sprite is located in at MY_WORKING_DIR/tmp/broccoli_sprite-tmp_cache_dir-ee8srq3p.tmp/assets/sprites.png

[nadavshatz]

@neilbaylor I'm trying to @import the generated scss and that part fails, i'm getting a sass issue saying the file can't be found.

Are you able to import the generated scss file?

[nadavshatz]

By removing the delete section under https://github.com/bguiz/ember-sprite/blob/develop/index.js#L79 I've managed to get the scss file to stay and exist but i have to run it first without referencing it in order to make it generate it and then run again with the file already there. No matter if i set the addon to run before ember-cli-sass. just won't work =\

[neilbaylor]

@nadavshatz yes i am the sprite file gets generated "before" i import it in my main scss file

It's a private project, but I can post some more details from my project if you'd like to see how everything is setup

I'm using broccoli-sprite version "0.1.1"

[nadavshatz]

@neilbaylor if you add a new sprite to the sprite list can you immediately reference it or do you have to run ember build once before you reference it? Which ember-cli version are you using? and you are not using the ember-sprite plugin?

Thank you for all the help!!

[neilbaylor]

Hey again

Nope, I'm only using broccoli sprite. IIRC, ember-sprite made it harder to accomplish this than brocolli-sprite, but i don't recall the exact details...

I'm using Ember CLI Version: 0.2.7

Here's my package.json:

{
dependencies: {
    "broccoli-asset-rev": "^2.0.2",
    "broccoli-funnel": "^0.2.3",
    "broccoli-sprite": "^0.1.1",
    "dotenv": "^1.2.0",
    "ember-cli": "0.2.7",
    "ember-cli-app-version": "0.3.3",
   ...
  }
}

[nadavshatz]

Ok I got it to work but only if I don't reference the file, then run it and only then reference it. quite the problematic flow... =\