如何将Scss NPM模块导入Ember

雷桑德罗

如何将非插件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

  1. 首先将其添加到includePaths您的ember-cli-build.js
new EmberApp({
  sassOptions: {
    includePaths: [
      'node_modules/flag-icon-css/sass'
    ]
  }
});
  1. 与它一起使用 @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本身。您可以使用西兰花FunnelMergeTrees

  1. 安装broccoli-funnnelbroccoli-merge-trees
  2. 将它们导入ember-cli-build.js
const Funnel = require('broccoli-funnel');
const MergeTrees = require('broccoli-merge-trees');
  1. 通过更换使用它们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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章