Bootstrap fonts not fetched when customizing sass

[coolo]

This might be a documentation issue, but the way you documented how to customize boostrap from sass does not work. The css is generated fine, but the fonts referenced in the css is not fetched nor url() rewritten. So you would need to define this externally ?

The workaround I found for me was adding bootstrap.css as << in the assetpack.def, which fetches the fonts. Then I put $icon-font-path: '/fonts' in my sass, which then generates url(/fonts/glyph...

And then I created symlinks in public/fonts/ to ../../assets/cache/...fonts/ - if you know a better way, please document it ;)

[jhthorsen]

Just to be clear: Everything works, except the font part?

What do you mean about using "bootstrap.css" instead? Instead of sass..? If so, then that's not helpful at all, since a plain css file cannot be customised.

Could you tell me how your $app->plugin(AssetPack => {....}) looks like?

This need to be fixed. Thanks for the bug report.

[coolo]

I have
$self->plugin(AssetPack => {pipes => [qw(Sass Css JavaScript Fetch OpenQA::WebAPI::AssetPipe Combine)]});

(the custom pipe only works around issue 94).

I just have another idea: as sass allows to customize the icon font path, what would happen if I set the font path to the full url of the sass? This would fetch them, no?

[coolo]

ah, I forgot to answer your question: yes, the sass is customized and compiled, but the fonts referenced in the compiled css are not fetched.

[coolo]

giving a full url as icon-fontpath does not work either right now.

[vikasnkumar]

@coolo
I was able to do this in the following manner. Install CSS::Sass , CSS::Minifier::XS and Javascript::Minifier::XS.

In the application:

  $self->plugin(AssetPack => { pipes => [qw/Sass Css JavaScript Fetch Combine/] });

In assets/assetpack.def:

  ! app.css 
  < https://raw.githubusercontent.com/twbs/bootstrap-sass/v3.3.7/assets/stylesheets/_boostrap.scss
  < https://raw.githubusercontent.com/twbs/bootstrap/v3.3.7/dist/css/bootstrap-theme.css

I tailed the logs and saw that the assets were downloaded.

I run the application with morbo -w assets -w libs -w templates ./script/myapp to force checking changes in assetpack.def.

To check if fonts were downloaded:

    $ find assets -name "*.ttf"

[jhthorsen]

Awesome! I'm closing this. @coolo: Please re-open if it doesn't work as expected.

[coolo]

this appends the css to the compiled scss - making using sass pretty pointless and it's not customizing the sass

[jhthorsen]

Please elaborate how it's different. I think I'm missing out on something here...

[coolo]

The rewrite of font paths in css in the fetch pipe does work. And this is what @vikasnkumar using - because the combined app.css will end with the css version. He basically overwrites the sass generated css with pregenerated css.

That fetching css fonts works, is what I use for my workaround described in the initial issue. But the problem still is that the css compiled from customized sass is not fetching fonts, nor rewrites the url. And the version of @vikasnkumar is just not exposing this.

[coolo]

oh wait, the css appended is just the theme.

[coolo]

OK, sorry for the noise. I can actually confirm that it's fixed. Most likely in 1.14, but I'm not going to look back :)

[coolo]

ok, this only fetches some fonts - and I can't reopen, sorry :)

As workaround I created a test case: #105

[s1037989]

FWIW, I'm having this problem, too.

[jhthorsen]

Closing this based on inactivity.

Sorry for not finding time to look into this issue.