5

broccoli-compassプラグインを使用しているときに、Ember CLI プロジェクトに CSS ライブラリを追加するのに問題があります。

次の行をブロクファイルに追加しました。

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。

SASSファイルに追加できるimportPathように、コンパス構成に追加しようとしましたが、それも機能しませんでした。@import

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

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 に答える