5

使用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在我的 Compass 配置中添加一个，以便我可以@import在我的 SASS 文件中，但这也没有奏效。

4

3 回答 3

1

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

在花了一些时间在 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文件中工作。

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

于 2014-06-02T20:17:45.080 回答
0

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'
    ],
  });
};

现在我可以@import foundation在我的 scss 文件中进行操作了。

于 2014-06-04T01:20:52.253 回答
0

您可以在 addon.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));
  }
于 2018-03-17T08:52:10.987 回答