如何将 scss npm 模块导入 Ember

Question

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

我正在尝试将 flag-icon-css 的 sass 版本与 ember-cli 一起使用，以便 sass 在部署期间与 [=14] 的其余部分一起构建=]，但我不知道如何以自动化方式执行此操作（例如，无需手动将文件复制到 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:

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

includePaths

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');

通过将 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 文件夹中，但在这种情况下这不会起作用，因为 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 图片 url 没有被处理，并且硬链接到 ../flags，所以我有将它们汇集到 /flags，这不是惯例，因为这些资产应该编译成 public/assets/images.

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

如何将 scss npm 模块导入 Ember

How do I import a scss npm module into Ember

css

sass

ember.js