How to compile stylesheets with fonts

[Ranmus]

Hi,

I would like to use in project some fonts like roboto and material-design-icons. I installed necessary packages via yarn and imported them in my entry js like this:

import 'material-design-icons/iconfont/material-icons.css';
import 'roboto-fontface/css/roboto/roboto-fontface.css';

In webpack dev mode everything seems to work fine and all assets are provided by webpack dev server.

But when i try to compile assets, they are dumped to web/compiled (js, fonts, etc.) but not included in my html dynamically (except bundle js file). How to make this? I'm using default webpack.config.js

[Ranmus]

Extracting css seems also good and paths are correct, so my problem concerns downloading by browser assets defined in css mixed with js.

[mariusbalcytis]

Your assets are not included dynamically into your html file. If you include your entry JavaScript file into your html and import CSS as described, your CSS will be loaded by the JavaScript - HTML will not include any link to CSS file automatically.

Do you use extract_css: true in your config.yml? If so, you must put a link to your css file. But I guess this is not the case as it works in dev environment.

Can it be that CSS is generated correctly, but paths to font files are somehow incorrect? Could you open Network tab of dev tools (F12) and see if there are any 404 errors?

[Ranmus]

As i wrote before, if i use extract_css to true, i'm extracting css via webpack_stylesheets, everything works ok. Browser downloads assets from bundled css file. I would like to use same effect without extracting css (and setting extract_css to false).

After your suggestions, made some checks and here are screenshots of results:

1) I'm disabling extracting css: http://4.1m.yt/r9kNWZ.jpg (and of course set config -> parameters -> extract_css to false)

2) Test page via maba:webpack:dev-server: http://4.1m.yt/QdOVw8-.jpg Material icons and roboto fonts are loaded successfully.

3) Test page via maba:webpack:compile: http://4.1m.yt/v-QyEr.jpg Assets defined in loaded css blobs are not loading although links are correct (i've checked them manually). Problem is that there are no network requests for these assets. (avatar and other requests to assets in my screenshot are actually outside webpack dev flow). No 404 errors.

[mariusbalcytis]

Well, if generated CSS is correct, links in CSS are also correct and assets via those links are loaded correctly, I don't quite know what could be wrong with the bundle.

Could you recheck the classes on the elements? Just inspect the element and see if correct class should be applied on it. Iif font files are not even tried to be loaded - maybe no element uses those fonts?

[Ranmus]

"Well, if generated CSS is correct, links in CSS are also correct and assets via those links are loaded correctly, I don't quite know what could be wrong with the bundle."

Problem is that, those assets are not loaded despite corrrect links. Browser don't download them. On weekend i will try to make some example.

[Ranmus]

It's been a while from my last comment, because i had some other tasks to do, but recently upgraded bundle to the new version that uses webpack 2 and little customized its configuration for my needs. The problem with not loading font blobs has gone. Thanks and keep up the good work. :+1: Issue can be closed now.

[mariusbalcytis]

Great, thanks!