vinkla / wordplate

A boilerplate for WordPress, built with Composer and designed with sensible defaults.
2.12k stars 155 forks source link

Using public assets #189

Closed bakgat closed 7 years ago

bakgat commented 7 years ago

When I move files (svg's, fonts, ...) in themes/wordplate/assets I can not access these. ie I copy font with mix

const theme = 'wordplate';

mix.setResourceRoot('../');
mix.setPublicPath(`public/themes/${theme}/assets`);

mix.js('resources/assets/scripts/app.js', 'scripts')
    .sass('resources/assets/styles/app.scss', 'styles')
    .copy('resources/assets/fonts/conq-carved-one.otf', `public/themes/${theme}/assets/fonts`)
    .version();

And in app.scss I have

@font-face
{
    font-family : "Carved One";
    src         : url(/themes/wordplate/assets/fonts/conq-carved-one.otf) format("truetype");
}

body
{
    font-family : "Carved One";
}

Then i get this error in console;

This happens with all files I try to get from assets folder. Except for the app.css and app.js loaded through mix. How can I fix this?

vinkla commented 7 years ago

Actually, you don't have to move the fonts manually. Laravel Mix will do that for you automagically if you include them with @font-face.

Remove this line from your mix file:

-.copy('resources/assets/fonts/conq-carved-one.otf', `public/themes/${theme}/assets/fonts`)

Update the @font-face to use a relative path instead of an absolute one:

@font-face {
    font-family : "Carved One";
-   src: url(/themes/wordplate/assets/fonts/conq-carved-one.otf) format("truetype");
+   src: url(../fonts/conq-carved-one.otf) format("truetype");
}

Let me know how it goes! 🦄

bakgat commented 7 years ago

Thanks for the help. 😄 The copying works perfectly. But still the font can't be found.

bakgat commented 7 years ago

I just discovered it only happens with WordplateValetDriver... A local valet driver clone, with some extra specifics for our workflow... 😬 Sorry for that, but thanks anyhow for teaching me some extra thing 😄