如何将Scss NPM模块导入Ember

debugcn 发表于 Dev

雷桑德罗

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

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

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

我已经在尝试此配置ember-cli-build.js：

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

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

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

勒克斯

只需使用ember-cli-sass：

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

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

与它一起使用 @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：

安装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。