{"action":"created","issue":{"url":"https://api.github.com/repos/systemjs/builder/issues/166","labels_url":"https://api.github.com/repos/systemjs/builder/issues/166/labels{/name}","comments_url":"https://api.github.com/repos/systemjs/builder/issues/166/comments","events_url":"https://api.github.com/repos/systemjs/builder/issues/166/events","html_url":"https://github.com/systemjs/builder/issues/166","id":75032931,"number":166,"title":"How to handle CSS Resources (e.g. images, fonts, etc.) during BundleSFX","user":{"login":"nkoterba","id":2508944,"avatar_url":"https://avatars.githubusercontent.com/u/2508944?v=3","gravatar_id":"","url":"https://api.github.com/users/nkoterba","html_url":"https://github.com/nkoterba","followers_url":"https://api.github.com/users/nkoterba/followers","following_url":"https://api.github.com/users/nkoterba/following{/other_user}","gists_url":"https://api.github.com/users/nkoterba/gists{/gist_id}","starred_url":"https://api.github.com/users/nkoterba/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/nkoterba/subscriptions","organizations_url":"https://api.github.com/users/nkoterba/orgs","repos_url":"https://api.github.com/users/nkoterba/repos","events_url":"https://api.github.com/users/nkoterba/events{/privacy}","received_events_url":"https://api.github.com/users/nkoterba/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2015-05-11T00:15:22Z","updated_at":"2015-05-11T11:22:25Z","closed_at":null,"body":"If this is a duplicate or similar issue, please close and/or link.\r\n\r\nI tried searching and couldn't find any obvious answers to this issue.\r\n\r\nI'm trying to use some web-fonts available in a package:\r\n```javascript\r\njspm install npm:mdi\r\n```\r\n\r\nInstalls this:\r\n![image](https://cloud.githubusercontent.com/assets/2508944/7556849/277c5c86-f750-11e4-9011-5c5c398f2e73.png)\r\n\r\nTo use the web-fonts I need to include the css file in my application. I do so using the `systemjs css` plugin:\r\n```javascript\r\nimport 'mdi/css/materialdesignicons.min.css!';\r\n```\r\n\r\nThis file contains relative paths to resources (in this case fonts):\r\n```javascript\r\n@font-face {\r\n  font-family: 'MaterialDesignIcons';\r\n  src: url(\"../fonts/materialdesignicons-webfont.eot?v=1.0.62\");\r\n  src: url(\"../fonts/materialdesignicons-webfont.eot?#iefix&v=1.0.62\") format(\"embedded-opentype\"), url(\"../fonts/materialdesignicons-webfont.woff2?v=1.0.62\") format(\"woff2\"), url(\"../fonts/materialdesignicons-webfont.woff?v=1.0.62\") format(\"woff\"), url(\"../fonts/materialdesignicons-webfont.ttf?v=1.0.62\") format(\"truetype\"), url(\"../fonts/materialdesignicons-webfont.svg?v=1.0.62#materialdesigniconsregular\") format(\"svg\");\r\n  font-weight: normal;\r\n  font-style: normal;\r\n}\r\n```\r\n\r\nHowever, after bundling my application with `bundleSFX`, my output/build file contains relative paths to the `jspm_packages` folder for the fonts defined above:\r\n```javascript\r\n@font-face{\r\nfont-family:MaterialDesignIcons;\r\nsrc:url(jspm_packages/npm/mdi@1.0.62-beta/fonts/materialdesignicons-webfont.eot?v=1.0.62);\r\nsrc:url(jspm_packages/npm/mdi@1.0.62-beta/fonts/materialdesignicons-webfont.eot?#iefix&v=1.0.62) format(\\\"embedded-opentype\\\"), url(jspm_packages/npm/mdi@1.0.62-beta/fonts/materialdesignicons-webfont.woff2?v=1.0.62) format(\\\"woff2\\\"), url(jspm_packages/npm/mdi@1.0.62-beta/fonts/materialdesignicons-webfont.woff?v=1.0.62) format(\\\"woff\\\"), url(jspm_packages/npm/mdi@1.0.62-beta/fonts/materialdesignicons-webfont.ttf?v=1.0.62) format(\\\"truetype\\\"), url(jspm_packages/npm/mdi@1.0.62-beta/fonts/materialdesignicons-webfont.svg?v=1.0.62#materialdesigniconsregular) format(\\\"svg\\\")\r\n```\r\n\r\nSo now when I run my \"bundled\" and \"production\" code on the server, I get `404s` because these resources don't exist (no `jspm_packages` folder exists in my `build/dist` folder) since all the source is bundled.\r\n\r\nHow is this situation supposed to be handled?  Do I need to copy things like resources into `build/dist` folder in the same path structure as they are under my \"development\" file structure?\r\n\r\nShould systemjs or the css plugin be inlining these files?\r\n"},"comment":{"url":"https://api.github.com/repos/systemjs/builder/issues/comments/100873615","html_url":"https://github.com/systemjs/builder/issues/166#issuecomment-100873615","issue_url":"https://api.github.com/repos/systemjs/builder/issues/166","id":100873615,"user":{"login":"guybedford","id":598730,"avatar_url":"https://avatars.githubusercontent.com/u/598730?v=3","gravatar_id":"","url":"https://api.github.com/users/guybedford","html_url":"https://github.com/guybedford","followers_url":"https://api.github.com/users/guybedford/followers","following_url":"https://api.github.com/users/guybedford/following{/other_user}","gists_url":"https://api.github.com/users/guybedford/gists{/gist_id}","starred_url":"https://api.github.com/users/guybedford/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/guybedford/subscriptions","organizations_url":"https://api.github.com/users/guybedford/orgs","repos_url":"https://api.github.com/users/guybedford/repos","events_url":"https://api.github.com/users/guybedford/events{/privacy}","received_events_url":"https://api.github.com/users/guybedford/received_events","type":"User","site_admin":false},"created_at":"2015-05-11T11:22:24Z","updated_at":"2015-05-11T11:22:24Z","body":"Ideally we do just want to have jspm_packages served in production though as it is also useful for dynamic loading scenarios."}}