ember.js - 使用 Ember CLI 和 broccoli-compass 添加供应商 CSS 库

Question

使用 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 .

我试过添加 importPath到我的指南针配置，以便我可以 @import在我的 SASS 文件中，但这也不起作用。

Answer 1

看来app.styles = ...上面的行覆盖了一些 Ember CLI 代码，所以 app.import suggestion来自 Ember CLI 指南不起作用。

花了一些时间和花椰菜一起吃后，我想出了如何供应 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 中工作文件。

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