Question

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

我已将此行添加到我的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，但这也没有用。

Answer 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文件。

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

Answer 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。

Answer 3

您可以在addon.scss中添加供应商文件，在addon的index.js中添加一个treeForAddon挂钩，在编译之前将供应商目录与漏斗合并。

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));
  }

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

3 个答案: