如何使用指南针生成ember-cli中的图像精灵？ [英] How to generate image sprites in ember-cli using compass?
问题描述
更新 - 20140614：
在没有得到任何答案的这个问题，或在github，
我决定来与我自己的解决方案的问题。
我使用指南针的一些东西，
，但它的主要实用程序是有能力生成图像精灵。
大多数其他事情可以使用纯粹的SCSS来实现。
因此，我写了
您可以详细了解此处的过程 。
现在我不再需要将指南针集成到我的ember-cli应用程序中。
由于我的解决方案没有直接回答这个问题（因为它不使用指南针），所以
我认为这个问题未被回答。
由于这个问题可能会使希望这样做的社区中的其他人受益匪浅，所以
我要离开这个公开，并且还会兑现赏金！
<更新 - 20140620：
赏金已过期。
原始问题：
在 ember-cli 应用程序，
使用西兰花-compass ，
如何配置，使生成的CSS正确地引用图像文件路径，包括生成的图像文件路径？
使用指南针，以下SCSS：
@importicon / *。png;
@include all-icon-sprites;
…将生成单个 .png 文件，其中包含图标文件夹中的所有图像，CSS将显示每个图像。 / p>
我希望能够使用ember-cli中的指南针，
使用西兰花
建立其资产管道。
- 必须在ember-cli - 也就是说，当ember服务或ember构建运行时，必须构建它。
- 必须使用指南针从图像文件夹生成图像精灵
- 生成的CSS应指向资产文件夹中的图像，而不是临时树文件夹
生成的图像应该复制到资产文件夹
我迄今为止所尝试的：
＃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'，
}）;
};
当我这样做， compass 命令失败，因为它无法在树中找到图像文件。
＃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'，
}）;
};
只是尝试一下，我将图像文件复制到styles目录中。
这次罗盘命令成功，但
生成的CSS引用不存在的图像文件。
生成的图像看起来不像预期的那样复制到资产文件夹（
或其他任何地方）：
$ tree tmp / output
tmp / output /
├──资产
│├──app.css
│├──app.js $ b├├├├├├├
├──testem.js
└──测试
└──index.html
3个目录，8个文件
详细信息
我想要编译的SCSS（对于精灵生成）：
@importcompass /公用事业/精灵;
$ icon-layout：smart;
$ icon-sprite-dimensions：true;
@importicon / *。png;
@include all-icon-sprites;
@importcompass / css3 / images;
添加到您的 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屋！
