如何将 scss npm 模块导入 Ember

Question

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

我试图用的青菜版本flag-icon-css与ember-cli从而使SASS与其余部署过程中正在修建ember-cli-sass，但我无法弄清楚如何做到这一点自动化的方式（例如，而无需手动将文件复制到public）。

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

我已经尝试过这种配置ember-cli-build.js：

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

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

我已阅读此文档，但它没有指定比单个文件更复杂的内容。

Answer 1

只需使用ember-cli-sass：

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

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

2. 使用它 @import "flag-icon";

看看自述文件。

现在虽然这将成功地将编译后的 sass 输出/assets/app-name.js添加到您的dist文件夹中，但没有自动方式将任何类型的资产添加到您的文件夹中。

在这种情况下，flag-icon-css它只会添加background-image: url(../flags/4x3/gr.svg);到您的dist/assets/app-name.css，而不是添加它svg本身。您可以使用花椰菜手动执行此操作，Funnel并且MergeTrees：

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

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

3. 通过替换return app.toTree()你的ember-cli-build.jswith 来使用它们

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。