30

更新- 20140614：

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

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

新PM

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

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

更新- 20140620：

赏金已过期。

原始问题：

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

使用指南针，以下 SCSS：

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

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

我希望能够通过 ember-cli 中的 compass 来做同样的事情，它使用broccoli 来构建它的资产管道。

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

只是为了尝试一下，我将图像文件复制到样式目录中。这次 compass 命令成功了，但是生成的 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";
4

2 回答 2

3

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

要安装 run: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为 just images，因为public/images文件夹复制到dist/images. 也许这就是问题所在，您不需要插件。

我希望这可以解决您的问题。

于 2014-07-20T11:40:26.657 回答
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');
}

更优雅的方式

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

@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不会飞。

于 2015-03-19T11:05:40.880 回答