How to does component resolve files after build?

[bigmeech]

Hi Guys,

My style sheet has some external fonts attached to it and doesnt resolve properly after build.css has been created.

@font-face { font-family: 'np-weather-glyphs'; src:url('/assets/fonts/np-weather-glyphs.eot?oe2uww'); src:url('/assets/fonts/np-weather-glyphs.eot?#iefixoe2uww') format('embedded-opentype'), url('/assets/fonts/np-weather-glyphs.woff?oe2uww') format('woff'), url('/assets/fonts/np-weather-glyphs.ttf?oe2uww') format('truetype'), url('/assets/fonts/np-weather-glyphs.svg?oe2uww#np-weather-glyphs') format('svg'); font-weight: normal; font-style: normal; }

how can i configure component.json in such a way that i can get access to these external fonts?

[timaschew]

did you add these fonts, or do you get them from a third party component? show your component.json file

[jonathanong]

they are all absolute URLs so component won't touch those.

[bigmeech]

here is my package.json file

{
  "name": "widgetui",
  "repo": "NPWeatherWidget/widgetui",
  "description": "Widget UI directive",
  "version": "0.0.1",
  "keywords": [],
  "dependencies": {},
  "development": {},
  "license": "MIT",
  "main": "index.js",
  "files":[
      "views",
      "assets"
  ],
  "scripts": [
    "index.js",
    "WidgetDirective.js"
  ],
  "styles": [
    "widgetui.css",
    "style.css"
  ]
}

In the assets folder i have fonts and img directory, after the build out a get a package structure such as this

build
  -widgetui             
     -assets          //symlink
         -fonts        //symlink
         -img          //symlink
     -views           //symlink

You would think the build.css references the fonts properly but it seems to rewrite the urls. i ended up having to use a cdn link to get those glyphs in.

[timaschew]

How it rewrites the font URL? Is the CSS file you posted, the generated one? How does your raw CSS looks like? In other words: show what you expect and what the result is?

How does your URL looks like if you open the HTML in the broswer? //file oder http?

[bigmeech]

@timaschew unfortunately i have taken component out of the project just for simplicity sake as not only was it complicating my css assets urls but also my angularjs test with karma so i cant exactly remember how it rewrote my links but it did. Maybe there are things i dont understand yet but i'll keep on doing my research and possibly find a good material on this and hopefully use component without issues in the near future.. Thanks guys!

[netpoetica]

Hey @bigmeech it may be a good idea not to use component for something that is time sensitive right now, but definitely think about starting out/learning with a personal project or something that you can take your time on. There is a bit of a learning curve at first as component can be a bit opinionated, but once you're more comfortable with it, it's awesome.

First thing though for starters, it looks like you've got stuff that belongs in your component.json file inside of your package.json file. What does your actual component.json file look like? I think the package.json file probably shouldn't have most of those properties in it

[bigmeech]

Oh Might God @netpoetica I just realised what i wrote when i posted that comment. It was meant to be component.json file not package.json file. Thanks Anyways..I'm still using component in my personal project so i'm still learning a lot about it. I absolutely love component especially with angularjs development and how it forces you to think about your modules as separate self-contained testable features without worrying too much about application structure and what generators to use so yes i am still using it.

My biggest issue was figuring out how to test these each component with karma the CommonJS way.