meteor - 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');
}

パッケージ システム API を介してクライアントにバンドルするよう Meteor に明示的に要求します。

/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 をいじることなく、イメージをクライアントに自動的に提供するためにパッケージを "mrt add" する必要があります。

例として、bootstrap3-glyphicons パッケージを考えてみましょう:

packages/
-> bootstrap3-glyphicons/
----> bootstrap-glyphicons/ (Twitter Bootstrap のサードパーティ ファイル)
-------> css/
----------> bootstrap-glyphicons. css
-------> fonts/
----------> 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'), ...
}