流星包css相对资源路径 [英] Meteor package css relative resource path
问题描述
如何从同一个包中的 CSS 文件引用 Meteor 包中的图像文件,以便在捆绑后可以访问该图像.
How can I refer to an image file in a Meteor package from a CSS file in the same package, so that the image would be accessible after bundling.
推荐答案
使用包相对路径引用你的图片,即:
Reference your image using package relative path, ie :
/packages/my-package/css/my_css.css :
/packages/my-package/css/my_css.css :
.my-class{
background-image:url('/packages/my-package/img/my_image.png');
}
明确要求 Meteor 通过包系统 API 将其捆绑到客户端:
Explicitly ask Meteor to bundle it on the client via the package system API :
/packages/my-package/package.js :
/packages/my-package/package.js :
Package.on_use(function(api){
var clientFiles=[
// css
"css/my_css.css",
// img
"img/my_image.png"
];
api.add_files(clientFiles,"client");
});
这样您的包将真正通用:用户只需mrt add"它即可自动将您的图像提供给客户端,而不会弄乱为特定于应用程序的静态文件保留的/public.
This way your package will be truly generic : users will just have to "mrt add" it to automatically serve your image to the client without messing with /public which is reserved for application-specific static files.
以 bootstrap3-glyphicons 包为例:
As an example, consider a bootstrap3-glyphicons package :
包/
-> bootstrap3-glyphicons/
----> bootstrap-glyphicons/(来自 Twitter Bootstrap 的第 3 方文件)
-------> css/
----------> bootstrap-glyphicons.css
-------> 字体/
----------> glyphiconshalflings-regular.eor
----------> ...
-------> bootstrap_override.css (我们的覆盖使其以 Meteor 方式工作)
-------> package.js
-------> smart.json
packages/
-> bootstrap3-glyphicons/
----> bootstrap-glyphicons/ (3rd party files from Twitter Bootstrap)
-------> css/
----------> bootstrap-glyphicons.css
-------> fonts/
----------> glyphiconshalflings-regular.eor
----------> ...
-------> bootstrap_override.css (our overriding to make it work the Meteor way)
-------> package.js
-------> smart.json
package.js :
package.js :
Package.on_use(function(api){
api.use(["bootstrap3"]);//!
//
var clientFiles=[
// css
"bootstrap-glyphicons/css/bootstrap-glyphicons.css",
// glyphicon fonts
"bootstrap-glyphicons/fonts/glyphiconshalflings-regular.eot",
...
];
api.add_files(clientFiles,"client");
// this css file makes the paths to the icon absolute (/packages/bootstrap3-glyphicons)
// it needs to be included AFTER the standard bootstrap css in order to take precedence.
api.add_files("bootstrap_override.css","client");
});
bootstrap_override.css :
bootstrap_override.css :
@font-face{
font-family:'Glyphicons Halflings';
src:url('/packages/bootstrap3-glyphicons/bootstrap-glyphicons/fonts/glyphiconshalflings-regular.eot');
src:url('/packages/bootstrap3-glyphicons/bootstrap-glyphicons/fonts/glyphiconshalflings-regular.eot?#iefix') format('embedded-opentype'), ...
}
这篇关于流星包css相对资源路径的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!