使用 Ember CLI 和 broccoli-compass 添加供应商 CSS 库答案

【问题标题】：Adding vendor CSS libraries with Ember CLI and broccoli-compass使用 Ember CLI 和 broccoli-compass 添加供应商 CSS 库
【发布时间】：2014-05-30 13:45:04
【问题描述】：

在使用 broccoli-compass 插件时，我无法将 CSS 库添加到我的 Ember CLI 项目中。

我已将此行添加到我的 brocfile：

app.styles = function() {
  return compileCompass(this.appAndDependencies(), this.name + '/styles/app.scss', {
    outputStyle: 'expanded',
    sassDir: this.name + '/styles',
    imagesDir: 'public/images',
    cssDir: '/assets',
    importPath: 'vendor'
  });
};

但现在我被困住了。我试过了

app.import('vendor/bootstrap/docs/assets/css/bootstrap.css');

但这不起作用，因为（我认为）我已经覆盖了app.styles。

我尝试在我的 Compass 配置中添加 importPath，以便在我的 SASS 文件中添加 @import，但这也没有用。

【问题讨论】：

您将 Compass 的 config.rb 文件放在哪里？我不断收到“您必须从项目目录编译单个样式表。”我的样式位于/app/styles 下，我将config.rb 放在/app 中，但这似乎不起作用。
我没有 config.rb，只使用 .scss 文件和 Compass 库（例如 @include border-radius()）。

标签： ember.js ember-cli broccolijs

【解决方案1】：

上面的 app.styles = ... 行似乎覆盖了一些 Ember CLI 代码，因此 Ember CLI 指南中的 app.import suggestion 不起作用。

在与 Broccoli 相处一段时间后，我想出了如何为 vendor 文件夹提供服务：

var pickFiles = require('broccoli-static-compiler');
var vendor = pickFiles('vendor', {srcDir: '/', destDir: '/vendor'});

现在broccoli serve 为我的供应商文件夹中的所有内容提供服务，并且

@import 'vendor/bootstrap/docs/assets/css/bootstrap.css';

在我的app.scss 文件中工作。

当然，我需要做更多的工作，以便最终构建中仅包含供应商资产的分发版本。

【讨论】：

@sam selikoff：这与我从 SCSS 文件导入图像时遇到的问题非常相似。如果可以，您能否看看我的问题：stackoverflow.com/q/24074351/194982 ... 或发布一个链接到您的完整Brocfile.js，您在哪里可以进行此导入？
谢谢，你能把它包括app.styles 的位一起发布吗？ ...指南针位是我最麻烦的部分。
山姆，谢谢。我已经尝试过您所做的事情，而供应商 CSS 位就像一个魅力。但是，我在精灵生成图像方面运气不佳。我已经开始对我的问题进行赏金（在第一条评论中链接）。我看到您自己为 broccoli-compass 做出了贡献 - 如果您能尝试一下，将不胜感激。

【解决方案2】：

版本 0.0.5 解决了这个问题，这对我有用：

var compileCompass = require('broccoli-compass');
app.styles = function() {
  return compileCompass(this.appAndDependencies(), this.name + '/styles/app.scss', {
    outputStyle: 'expanded',
    sassDir: this.name + '/styles',
    imagesDir: 'public/images',
    cssDir: '/assets',
    importPath: [
      process.cwd() + '/vendor/foundation/scss'
    ],
  });
};

现在我可以在我的 scss 文件中执行 @import foundation。

【讨论】：

【解决方案3】：

你可以在 addon.scss 中添加一个 vendor 文件，在插件的 index.js 中添加一个 treeForAddon 钩子，在编译之前将 vendor 目录与一个 Funnel 合并。

treeForAddon: function(tree) {
    this._requireBuildPackages();

    if (!tree) {
      return tree;
    }

    var addonTree = this.compileAddon(tree);

    var vendorCss = new Funnel(this._treeFor('vendor'), {
      srcDir: '/css'
    });

    var mergedStylesTree = new MergeTrees([this._treeFor('addon-styles'), vendorCss]);

    var stylesTree = this.compileStyles(mergedStylesTree);

    return MergeTrees([addonTree, stylesTree].filter(Boolean));
  }

【讨论】：