Question

如何将非插件npm模块正确导入Ember？

我正在尝试将flag-icon-css的sass版本与ember-cli一起使用，以便在部署过程中使用ember-cli-sass的其余部分来构建sass，但是我不知道如何以自动化方式（例如，无需手动将文件复制到public上）。

使用ember-auto-import似乎是一个不错的起点，但它更适合javascript导入。

我在ember-cli-build.js中尝试过此配置：

    'sassOptions': {
        includePaths: [
            'node_modules/flag-icon-css/sass' // flag-icon.scss
        ]
    },

它将添加样式，但不包括样式中使用的图像。

我已经读过this documentation，但是它没有指定比单个文件更复杂的内容。

Answer 1

只需使用ember-cli-sass：

首先将其添加到includePaths中的ember-cli-build.js

new EmberApp({
  sassOptions: {
    includePaths: [
      'node_modules/flag-icon-css/sass'
    ]
  }
});

与@import "flag-icon";一起使用

看看readme。

现在，尽管这将成功地将已编译的sass输出添加到您的/assets/app-name.js中，但是没有自动的方法可以将任何种类的资产添加到您的dist文件夹中。

对于flag-icon-css，它只会将background-image: url(../flags/4x3/gr.svg);添加到您的dist/assets/app-name.css中，而不会添加svg本身。您可以使用西兰花Funnel和MergeTrees手动完成此操作：

安装broccoli-funnnel和broccoli-merge-trees
将它们导入ember-cli-build.js：

const Funnel = require('broccoli-funnel');
const MergeTrees = require('broccoli-merge-trees');

通过将return app.toTree()中的ember-cli-build.js替换为

const flagIcons = Funnel('node_modules/flag-icon-css', { include: ['flags/**/*'] });
return new MergeTrees([app.toTree(), flagIcons]);

因此您整个ember-cli-build.js可能看起来像这样：

'use strict';

const EmberApp = require('ember-cli/lib/broccoli/ember-app');
const Funnel = require('broccoli-funnel');
const MergeTrees = require('broccoli-merge-trees');

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    // Add options here
    sassOptions: {
      includePaths: [
        'node_modules/flag-icon-css/sass'
      ]
    }
  });

  const flagIcons = Funnel('node_modules/flag-icon-css', { include: ['flags/**/*'] });
  return new MergeTrees([app.toTree(), flagIcons]);
};

一个简短的旁注：我通常建议将资产放入输出的assets文件夹中，但是在这种情况下，由于flag-icon-css期望flags文件夹位于在.css的 parent 目录中。

Answer 2

我已经弄清楚了，但是我不确定这是最好还是最简单的方法。它有一些缺点。

const EmberApp = require('ember-cli/lib/broccoli/ember-app')
const Funnel = require('broccoli-funnel')

module.exports = function(defaults) {
    const app = new EmberApp(defaults, {
        'sassOptions': {
            includePaths: [
                'node_modules/flag-icon-css/sass'
            ]
        }
    })

    const flags = new Funnel('node_modules/flag-icon-css/', {
        srcDir: 'flags',
        destDir: '/flags',
    })

    return app.toTree([flags])
}

缺点是css图片网址未处理，并且硬链接到../flags，所以我必须将其合并到/flags中，这不是惯例，因为这些资产应编译为public/assets/images。

这是一个两步实现（如果npm模块会更复杂，则可以更多步）。最好只包含scss并让（一个）Ember（插件）自动获取相关资源。

如何将Scss NPM模块导入Ember

2 个答案: