css - 如何将 scss npm 模块导入 Ember

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:

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

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

1. 将它与 @import "flag-icon"; 一起使用

看看 readme .

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

在 flag-icon-css 的情况下，它只会添加 background-image: url(../flags/4x3/gr.svg); 到你的dist/assets/app-name.css，但不添加 svg 本身。您可以使用 broccolis Funnel 和 MergeTrees 手动执行此操作:

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

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

1. 通过将 ember-cli-build.js 中的 return app.toTree() 替换为
来使用它们

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 放入输出的 assets 文件夹中，但在这种情况下这不会起作用，因为 flag-icon-css期望 flags 文件夹位于 .css 的 parent 目录中。