Meteor包css相对资源路径

Question

如何从同一个包中的 CSS 文件引用 Meteor 包中的图像文件，以便在捆绑后可以访问该图像。

Answer 1

使用包相对路径引用您的图像，即:

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

这样你的包将是真正通用的:用户只需“mrt add”它就可以自动将你的图像提供给客户端，而不会弄乱/public 这是为特定于应用程序的静态文件保留的。

例如，考虑一个 bootstrap3-glyphicons 包:

包/
-> bootstrap3-glyphicons/
----> bootstrap-glyphicons/(来自 Twitter Bootstrap 的第 3 方文件)
------> CSS/
----------> bootstrap-glyphicons.css
------>字体/
----------> glyphiconshalflings-regular.eor
----------> ...
------> bootstrap_override.css (我们重写以使其以 Meteor 方式工作)
------> package.js
------> smart.json

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