我如何正确地导入一个非插件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,但它没有指定比单个文件更复杂的内容。
2条答案
按热度按时间qlvxas9a1#
只需使用
ember-cli-sass
:1.首先将其添加到
ember-cli-build.js
中的includePaths
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
本身。你可以手动添加broccolisFunnel
和MergeTrees
:1.安装
broccoli-funnnel
和broccoli-merge-trees
1.将它们导入到
ember-cli-build.js
中:1.请将您的
ember-cli-build.js
中的return app.toTree()
替换为因此整个
ember-cli-build.js
看起来如下所示:短边表示:我通常会建议将资源放入输出的
assets
文件夹中,但在这种情况下,这将不起作用,因为flag-icon-css
希望flags
文件夹位于.css
的 parent 目录中。fdx2calv2#
我想出来了,但我不确定这是不是最好或最简单的方法。它有一些缺点。
缺点是css图像url没有经过处理,并且硬链接到
../flags
,所以我 * 必须 * 将它们导入/flags
,这不是惯例,因为这些资产应该被编译到public/assets/images
。这是一个两步的实现(如果npm模块更复杂,则需要更多的步骤)。最好只包含
scss
,并让Ember(插件)自动获取依赖的资源。