我正在开发一个ember插件,它从其依赖项导入sass。为了使用它,我的插件中有以下内容-
# my-addon/package.json
...
"dependencies": {
"lib1": "^1.5.3",
"lib2": "1.2.3",
"ember-cli-sass": "^10.0.1",
"sass": "^1.23.3"
}
...
b1a1a
# my-addon/ember-cli-build.js
let app = new EmberAddon(defaults, {
// Add options here
sassOptions: {
includePaths: [
'node_modules'
]
}
});
这样,tests/dummy
处的虚拟应用程序可以解析导入。但当我在主机应用程序中使用插件时
Error: Can't find stylesheet to import.
╷
1 │ @import "lib1/assets/stylesheets/styles";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
我可以将主机应用的e1d1e修改为
let app = new EmberAddon(defaults, {
// Add options here
sassOptions: {
includePaths: [
'node_modules/my-addon/node_modules'
]
}
});
理想情况下,它应该可以工作,但sass内存不足,因为它试图导入主机应用程序node_modules
中的所有内容。如何使虚拟应用程序和主机应用程序都能够导入命名空间lib-scs?
1条答案
按热度按时间ui7jx7zq1#
写我的插件我也有同样的问题!
我做了大量的研究,把学到的东西混合起来,得出了以下结论。
描述场景:
编写一个EmberJS Addon来提供材质设计组件,在本地安装库,并且只针对我想要插件的组件和行为,重用并作为自定义成员组件公开。类似于采用的插件Ember paper。
注意,对于这个答案,我只添加了@material/typography
我第一次犯了同样的错误->将
sassOptions
添加到ember-cli build。jsincluding the whole
node_modulespath. But the comment that the addon-cli wrote in the
ember-clibuild文件让我意识到我错了。 /*此构建文件指定此插件的虚拟测试应用程序的选项,位于
/tests/dummy中。此构建文件*不*影响插件或使用它的应用程序的行为。您很可能希望修改
./index.js`或应用程序的构建文件*/解决方案
首先,我们应该安装一些npm包
resolve:
异步将模块路径字符串id解析为cb(err,res[,pkg]),其中pkg(如果已定义)是package.json中的数据
broccoli-funnel:
给定一个输入节点,Brocoli漏斗插件返回一个新节点,其中只包含输入节点中文件的子集。文件可以移动到不同的路径。可以使用正则表达式选择要包含或排除的文件。
broccoli-merge-trees:
将文件的多个树相互重叠复制,从而形成一个合并树。
这样,您就可以在虚拟应用程序或其他使用npm链接或发布插件的应用程序中使用插件及其外部sass文件。
请注意,我倾向于强制插件消费者导入
@import 'my-addon-scss';
。我没有直接在#my-addon/addon/styles/addon.scss
上测试提供样式。我相信这个答案可以引发关于创建ember附加组件的讨论。
我希望我能得到答案,使我的代码更好。
参考文献