如何使用指南针在ember-cli中生成图像精灵？ [英] How to generate image sprites in ember-cli using compass?
问题描述
更新 - 20140614：
无法获得此问题的任何答案或github，
我决定来用我自己的解决方案来解决问题。
我使用指南针的一些东西，
，但它的主要实用程序是在其生成图像精灵的能力。
因此，我写了
您可以< a href =http://blog.bguiz.com/post/88719320815/broccoli-sprite-released>了解有关此处的详情。
现在我不再有兴趣集成罗盘到我的ember-cli应用程序。
由于我的解决方案不直接回答问题（因为它不使用指南针），
我认为这个问题是未回答。
由于这个问题可能会有利于社区的其他人希望这样做，
我将保持开放，并仍然尊重赏金！
更新 - 20140620：
赏金已过期。
原始问题
：在 ember-cli 应用程式，
使用 broccoli指南针，
如何配置以使生成的CSS正确地引用图像文件路径，包括生成的图像文件路径？
使用罗盘，以下SCSS：
@importicon / *。png;
@include all-icon-sprites;
…将生成图标文件夹中的所有图像的单个 .png 文件，以及用于显示每个图像的CSS。 / p>
困难的方式
添加到您的 brocfile
var app = new EmberApp（{
compassOptions：{
imagesDir：'public / assets'
}
}）;
，然后导入图标
@importcompass / utilities / sprites;
@importicons / *。png;
$ icons-sprite-dimensions：true;
@include all-icons-sprites;
并覆写路径
.icons-sprite {
background-image：url（'/ assets / icons-sea02d16a6c.png'）;
}
更优雅的方式
配置指南针以使用特定目录
@importcompass / utilities / sprites
@importcompass / configuration;
$ compass-options：（http_path：/，generated-images-path：public / assets，http-generated-images-path：/ assets，images-path：公共/资产）;
@include compass-configuration（$ compass-options）;
@importicons / *。png;
$ icons-sprite-dimensions：true;
@include all-icons-sprites;
这不是一个完美的解决方案，虽然它的工作原理。配置不应存储在 .scss 文件中。不幸的是， brocfile 中的那些选项不会飞。
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.
- Must work within ember-cli - that is, it must be built when ember serve or ember build is run
- Must use compass to generate image sprites from a folder of images
- The images generated should be copied to the assets folder
- The generated CSS should point to images located in the assets folder, not to a temporary tree folder
What I have attempted so far:
#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";
The hard way
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');
}
The more elegant way
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.
这篇关于如何使用指南针在ember-cli中生成图像精灵？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
