Meteor包css相对资源路径

如何从同一包中的CSS文件引用Meteor包中的图像文件,以便在捆绑后可以访问该图像. 使用包相对路径引用您的图像,即：

/packages/my-package/css/my_css.css：

.my-class{
    background-image:url('/packages/my-package/img/my_image.png');
}

明确要求Meteor通过包系统API将其捆绑在客户端上：

/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");
});

通过这种方式,您的软件包将是真正的通用：用户只需“添加”它就可以自动将您的映像提供给客户端,而不会弄乱为公用程序特定的静态文件保留的/ public.

举个例子,考虑一个bootstrap3-glyphicons包：

包/
– > bootstrap3-glyphicons /
—-> bootstrap-glyphicons /(来自Twitter Bootstrap的第三方文件)
——-> CSS /
———->自举glyphicons.css
——->字体/
———-> glyphiconshalflings-regular.eor
———-> …
——-> bootstrap_override.css(我们重写让它按照Meteor的方式工作)
——-> package.js
——-> smart.json

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：

@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'), ...
}