Update - 20140614:
After not getting any answers to this question, or on github, I decided to come up with my own solution to the problem. I was using compass for a number of things, but its main utility was in its ability to generated image sprites. Most other things could be accomplished using pure SCSS.
Thus, I wrote broccoli-sprite. This, used in conjunction with ember-cli's built in support for SCSS using broccoli-sass, was able to meet my needs.
You can read more about the process here.
Now I am thus no longer interested in integrating compass into my ember-cli app. As my solution does not directly answer the question (as it does not use compass), I consider this question to be unanswered. Since this question might yet benefit others in the community who wish to do so, I am leaving this open, and will still honour the bounty!
Update - 20140620:
Bounty has expired.
Original question:
In an ember-cli app, using broccoli-compass, how can it be configured such that the generated CSS references image file paths correctly, including generated image file paths?
Using compass, the following SCSS:
@import"icon/*.png";
@include all-icon-sprites;
… will generate a single .png
file with all of the images in the icon
folder, and CSS for displaying each.
I would like to be able to do the same via compass within ember-cli, which uses broccoli to build its asset pipeline.
#1
app.styles = function() {
var tree = this.appAndDependencies();
return compileCompass(tree, {
outputStyle: 'expanded',
relativeAssets: false,
sassDir: this.name+'/styles',
imagesDir: 'public/images',
// imagesDir: this.name+'/styles/images',
cssDir: '/assets',
});
};
When I do this, the compass
command fails because it cannot locate the image files within the tree.
#2
app.styles = function() {
var tree = this.appAndDependencies();
return compileCompass(tree, {
outputStyle: 'expanded',
relativeAssets: false,
sassDir: this.name+'/styles',
// imagesDir: 'public/images',
imagesDir: this.name+'/styles/images',
cssDir: '/assets',
});
};
Just to try things out, I copy the image files into the styles directory. This time the compass command succeeds, but, the generated CSS references image files that do not exist. The generated images do not appear to get copied into the assets folder as expected ( or anywhere else for that matter):
$tree tmp/output
tmp/output/
├── assets
│ ├── app.css
│ ├── app.js
│ ├── qunit.css
│ ├── qunit.js
│ └── vendor.css
├── images
├── index.html
├── testem.js
└── tests
└── index.html
3 directories, 8 files
Details:
SCSS that I would like to be able to compile (for sprite generation):
@import"compass/utilities/sprites";
$icon-layout: smart;
$icon-sprite-dimensions: true;
@import"icon/*.png";
@include all-icon-sprites;
@import"compass/css3/images";
I thought this would be solved by using an ember addon and postprocess hook, i published an addon,
To install run: npm install ember-cli-compass --save-dev
inside your project.
Configure in your Brocfile.js
.
/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var app = new EmberApp({
compass: {
outputStyle: 'expanded',
relativeAssets: false,
sassDir: 'assets',
imagesDir: 'images',
cssDir: 'assets'
}
});
module.exports = app.toTree();
This seems to do what you want but i am not sure. Also i needed to change public/images
to just images
, because public/images
folder copies into dist/images
. Maybe that's the issue and you don't need an addon.
I hope this fixs your problem.
Add to your brocfile
var app = new EmberApp({
compassOptions: {
imagesDir: 'public/assets'
}
});
and then import the icons
@import "compass/utilities/sprites";
@import "icons/*.png";
$icons-sprite-dimensions: true;
@include all-icons-sprites;
and overwrite the path
.icons-sprite {
background-image: url('/assets/icons-sea02d16a6c.png');
}
Configure compass to use particular directory
@import "compass/utilities/sprites";
@import "compass/configuration";
$compass-options: (http_path: "/", generated-images-path: "public/assets", http-generated-images-path: "/assets", images-path: "public/assets");
@include compass-configuration($compass-options);
@import "icons/*.png";
$icons-sprite-dimensions: true;
@include all-icons-sprites;
It is not a perfect solution although it works. Configuration should not be stored in .scss
files. Unfortunately those options inside brocfile
are not going to fly.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With