添加供应商CSS库烬CLI和花椰菜指南针

Question

在使用西兰花指南针插件时，我在向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。

我已经尝试添加一个importPath到我的指南针配置，这样我就可以在我的SASS文件@import，但这也没有工作。

Answer 1

上面的app.styles = ...行似乎覆盖了一些Ember CLI代码，因此来自Ember CLI指南的app.import建议不工作。

在花了一段时间西兰花我想出了如何服务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

您可以在插件中添加供应商文件。scss在插件的index.js中添加一个treeForAddon钩子，在编译前将供应商目录与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));
  }