如何在使用compass的ember-cli中生成图像精灵？

Question

如何在使用compass的ember-cli中生成图像精灵？

javascriptcssember.jscompass-sassbroccolijs

30

更新 - 20140614:

由于没有得到关于这个问题的答案或者在github上的帮助，我决定自己解决这个问题。我之前用compass进行了很多操作，但它最主要的用处是生成图片精灵。其他大部分功能可以通过纯SCSS实现。

因此，我写了一个broccoli-sprite。结合使用ember-cli内置的支持SCSS的broccoli-sass，就可以满足我的需求。

你可以在这里阅读有关这个过程的更多信息。

现在，我不再有将compass集成到我的ember-cli应用程序中的兴趣。因为我的解决方案并没有直接回答这个问题（因为它不使用compass），所以我认为这个问题仍未得到解答。由于这个问题可能会对其他希望这样做的社区成员有所帮助，我将保持它的开放，并仍然会遵守悬赏规定！

更新 - 20140620:

悬赏已过期。

原问题：

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

使用compass的话，可以使用以下SCSS：

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

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

我希望能够通过ember-cli中的compass执行相同的操作，它使用broccoli构建其资产管道。

必须在ember-cli中运行 - 也就是说，在运行ember serve或ember build时必须构建它
必须使用compass从图像文件夹生成图像精灵
生成的图像应该被复制到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',
  });
};

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

$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（用于雪碧图生成）：

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

- bguiz

如果可能的话，您可以发布您的解决方案（通过回答您自己的问题），这样其他人就可以更清楚地看到它，问题也会被回答 :) - markthethomas

1

@markthethomas 谢谢您的评论，不过很遗憾，我采用的解决方案并不符合这个问题的要求。我找到了一种创建sprites的方法，但是没有使用compass。请查看我20140614年的更新：“由于我的解决方案不能直接回答问题（因为它不使用compass），而这个问题可能仍然有益于社区中希望这样做的其他人，所以我将保持开放，并仍将尊重奖励！”...我仍然认为这个问题没有得到回答，解决方案仍然未知！ - bguiz

1

感谢您的澄清 :) - markthethomas

什么！250，我一周前就回答了这个问题。有点常识吧。 - eguneys

2个回答

1

困难的方法

将其添加到您的Brocfile中

var app = new EmberApp({
    compassOptions: {
        imagesDir: 'public/assets'
    }
});

然后导入图标。

@import "compass/utilities/sprites";
@import "icons/*.png";

$icons-sprite-dimensions: true;
@include all-icons-sprites;

并覆盖路径

.icons-sprite {
    background-image: url('/assets/icons-sea02d16a6c.png');
}

更优雅的方式

配置 Compass 使用特定目录

@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;

虽然它能够正常运行，但并不完美。配置不应该存储在.scss文件中。不幸的是，在brocfile中的这些选项不会起作用。

- Mateusz Nowak

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- eguneys · Accepted Answer

我认为这个问题可以通过使用Ember插件和后处理钩子来解决，我已经发布了一个插件。

要安装，请在你的项目中运行以下命令：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中。也许这就是问题所在，你不需要添加其他内容。

希望这能解决你的问题。