如何使用指南针在 ember-cli 中生成图像精灵? [英] How to generate image sprites in ember-cli using compass?

问题描述

更新 - 20140614:

在没有得到这个问题的任何答案后，或者在github上，我决定想出我自己的解决方案来解决这个问题.我用指南针做很多事情，但它的主要用途是生成图像精灵的能力.大多数其他事情都可以使用纯 SCSS 来完成.

因此，我编写了

您可以在此处阅读有关该过程的更多信息.

现在我不再有兴趣将指南针集成到我的 ember-cli 应用程序中.由于我的解决方案没有直接回答问题(因为它不使用指南针)，我认为这个问题没有答案.由于这个问题可能会使社区中希望这样做的其他人受益，我将保持开放状态，并且仍然会兑现赏金！

更新 - 20140620:

赏金已过期.

<小时>

原始问题:

在 ember-cli 应用中，使用 broccoli-compass，如何配置生成的CSS正确引用图片文件路径，包括生成的图片文件路径?

使用指南针，以下 SCSS:

@import"icon/*.png";@include all-icon-sprites;

…将生成一个 .png 文件，其中包含 icon 文件夹中的所有图像，以及用于显示每个图像的 CSS.

我希望能够通过 ember-cli 中的指南针执行相同的操作，它使用 broccoli建立其资产管道.

• 必须在 ember-cli 中工作 - 也就是说，它必须在 ember serve 或 ember build 运行时构建
• 必须使用指南针从图像文件夹中生成图像精灵
• 生成的图片应该复制到assets文件夹中
• 生成的 CSS 应该指向位于 assets 文件夹中的图像，而不是临时树文件夹

<小时>

到目前为止我尝试过的:

#1

app.styles = function() {var tree = this.appAndDependencies();返回编译指南针(树，{输出样式:'扩展'，相对资产:假，sassDir: this.name+'/styles',imagesDir: '公共/图片',//imagesDir: this.name+'/styles/images',cssDir: '/assets',});};

执行此操作时，compass 命令失败，因为它无法在树中定位图像文件.

#2

app.styles = function() {var tree = this.appAndDependencies();返回编译指南针(树，{输出样式:'扩展'，相对资产:假，sassDir: this.name+'/styles',//imagesDir: '公共/图片',imagesDir: this.name+'/styles/images',cssDir: '/assets',});};

只是为了尝试一下，我将图像文件复制到样式目录中.这次指南针命令成功了，但是，生成的 CSS 引用了不存在的图像文件.生成的图像似乎没有按预期复制到资产文件夹中(或其他任何地方):

$tree tmp/输出tmp/输出/├──资产│ ├── app.css│ ├── app.js│ ├── qunit.css│ ├── qunit.js│ └── vendor.css├── 图片├── index.html├── testem.js└── 测试└── index.html3个目录，8个文件

<小时>

详情:

我希望能够编译的 SCSS(用于生成精灵):

@import"compass/utilities/sprites";$icon-layout:智能；$icon-sprite-dimensions: true;@import"icon/*.png";@include all-icon-sprites;@import"compass/css3/images";

<小时>

解决方案

艰难的道路

添加到您的brocfile

var app = new EmberApp({指南针选项:{imagesDir: '公共/资产'}});

然后导入图标

@import "compass/utilities/sprites";@import "icons/*.png";$icons-sprite-dimensions: true;@include all-icons-sprites;

并覆盖路径

.icons-sprite {背景图片:url('/assets/icons-sea02d16a6c.png');}

更优雅的方式

配置指南针以使用特定目录

@import "compass/utilities/sprites";@import "指南针/配置";$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;

虽然它有效，但它不是一个完美的解决方案.配置不应存储在 .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屋！