javascript - 如何使用 compass 在 ember-cli 中生成图像 Sprite ？

Question

更新 - 20140614:

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

因此，我写了broccoli-sprite .这与 ember-cli 对 SCSS 的内置支持结合使用使用 broccoli-sass ,能够满足我的需求。

您可以 read more about the process here .

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

更新 - 20140620:

赏金已过期。

---

原始问题:

在 ember-cli 中应用程序，使用 broccoli-compass ,如何配置才能使生成的 CSS 正确引用图像文件路径，包括生成的图像文件路径？

使用compass，下面的SCSS:

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

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

我希望能够通过 ember-cli 中的 compass 来做同样的事情，使用 broccoli建立其 Assets 管道。

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

---

到目前为止我尝试了什么:

#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 目录中。这次 compass 命令成功了，但是，生成的 CSS 引用了不存在的图像文件。生成的图像似乎没有按预期复制到 Assets 文件夹中(或其他任何地方):

$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

---

详细信息:

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

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

---

Answer 1

我认为这可以通过使用 ember 插件和后处理 Hook 来解决，我发布了一个插件，

要安装运行:npm install ember-cli-compass --save-dev 在您的元素中。

在您的 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();

这似乎可以满足您的要求，但我不确定。我还需要将 public/images 更改为 images，因为 public/images 文件夹复制到 dist/images .也许这就是问题所在，您不需要插件。

希望这能解决您的问题。