如何将非插件npm模块正确导入Ember?
我正在尝试使用flag-icon-css
with的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
。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句